Thanks, I’ll be sure to test this out at some point.
Good work! I will think about how to incorporate this into Shotcut. It might need to wait until I add categories and searching to the Filters menu.
I have not looked at your source yet, but I did find out how to embed a Web Animations API polyfill to properly support CSS3 animation with seeking. However, it requires knowing the current duration of the trimmed clip to work correctly. I plan to factor that information into WebVfx when working on the Keyframes feature, which is currently in progress (not v18.03 unfortunately; had some personal setbacks).
Hi Elusien. This looks fantastic, the movie credits are silky smooth, and there are some highly effective animations. Great work! Can you help me? I’ve just created a video title sequence using HTML and CSS but I would really like to know how to tweak the code using your framework so it can be used directly in Shotcut, My video title can be seen at Codepen HERE:
I can post the full notepad text on this forum if you’d like t see it. Many thanks for posting your work here. Regards
Jon
Been out for the day, so only just seen this. The animation is very good. I’ll have a look at how to port it sometime tomorrow (it’s already evening here in Cyprus).
Wow, thanks for the speedy reply, Elusien! Thanks for having a look at it, that would be great - only when you get a moment. I was just unsure about the webfx code - what code to use and where to put it… One thing I’ve just noticed - would I have to change the font colours to hex values? Thank you. Jon (PS if you’re in Cyprus you probably haven’t got tons of snow like we have here in the UK…)
So long as the font colours are not in keyframes you can use any convention (name / #### / rgb(…
It only if the font color is animated that it has to be a #### or rgb(…
I should have something after I get back from golf tomorrow. My son was supposed to be flying back to the UK today, but we rescheduled his flight to next week. Looking at BBC news it looks like we did the right thing.
Dan, sorry to hear about your setbacks, I hope everything gets back on track for you soon.
I’ll have a look at the polyfill you pointed out. I’m afraid my code is a bit of a mish-mash. I originally knocked it together as a proof of concept and coding standards, unlike when I did programming for a living, were not at the top of my priorities.
It may be possible for me to use the polyfill code, but hide its complexities from the end-user. Eventually your suggestion of trying to find a way to support animation natively in Shotcut is the best course of action, but I appreciate how much effort this may take and that other features take precedence.
I had to modify the framework slightly to accept two sets of animation on an element. I could have modified your example to use only 1 by messing with the keyframes, but it would have been unrecognisable and not very intuitive. It now accepts a ‘data-animate2’ attribute.
The example looks very similar to your original CSS code. Since your animation runs for about 10 seconds it was fairly simple to modify. The ‘start’, is the CSS ‘delay’ divided by 10, to get a number between 0.0 and 1.0 and the ‘end’ is one-tenth of the sum of the ‘delay’ + ‘duration’.
If you go over to the website and download the latest version of the javascript and copy-paste the “Text” example that you’ll find there you should be able to compare this with your original to see what I mean.
I got hung up a bit on an MLT/Shotcut (WebVfx?) bug to do with text-shadows. It will accept an offset, providing the blur is zero (4px 4px 0), or it will accept a blur, providing the offset is zero (0 0 4px), but if you have both an offset and a blur, you get clipping on the text-shadow. It doesn’t happen on every element, but is very noticable on the ‘B’ and ‘o’. So I went for a zero-offset high-blur effect.
I’d be interested to see any new animations you produce using the framework, this one is quite cool.
Elusien,
Thank you SO much for doing this for me and for the probably considerable time it has taken you. I am very grateful! I think I am beginning to understand how your webVfx framework works. Busy right now mending the roof 
but I will have a more detailed look later and get back to you. Thanks again,
Jon
PS for others here is the link again to Elusien’s website:
www.elusien.co.uk/shotcut/index.php
Hi Elusien,
Your adapted version of my text animation looks really nice - thanks so much!!. I just had to get used to the blue blurring! I like it though and will adapt my original to include some blur around the text. One thing I was confused about though- I wondered why you have given the text-shadow 8 different values with a comma in between each? I’ve not seen that before.
I see the text letters move slightly faster and a little more jerkily than in my original - probably due to the timings? - and I see you have used EaseInOutBounce.
I’ve had a brief go at experimenting with your code but I’ve hit a problem - I cut and pasted the code from your website into Notepad++, saved it as a html file in my desktop, also downloaded the webFvx.js file to the desktop. But when I select “run in Chrome” all I get is a powder blue background. Any ideas about this would be gratefully received…
Thanks again,
Jon
Jon,
Did you put the webvfx.js file in the same folder (directory) as the HTML file? If it is in a different folder you need to modify the <script src=‘webvfx.js’> line accordingly.
Otherwise hit function key F12 to bring up Chrome’s development tools. Then click on the “Console” tab and see what error is reported.
The 8 text-shadows is a neat little way to create a “neon” glow blur effect. You will see another text-shadow declaration below this one that is commented out. This is a much more subdued thin grey blur. Experiment with it and see what you like - same with the different easing functions. I like Bounce and Sine. In fact I think the one most similar to the one you were using is easeInOutSine
Hi Elusien,
I just solved the last problem - my fault - DOH! I had inadvertently added a space to the webvfx filename - simple human error!! Works fine in Chrome now. I will have a play when I get some free time. Thanks for the text shadow information. Interesting stuff!
Jon
Hi Elusien, just a quick note to say I’m really keen to experiment with the webfvx animations but spare time is very short at the moment (due to pressures of work!) so I have been unable to get to “play” with the code for the past few days. I really appreciate your help with the webfx framework. Will be in touch when I get chance to experiment. I do have more animations which I hope can be adapted with webfx and I’ll send the code to you when I’ve found time to get to it.
Thanks again
Jon
“work”, let me think, I used to know what that was. I seem to remember it came before “retirement”. If you need any assistance just let me know.
1 Like
I just found a short span of free time in which I made a new HTML video title animation. I wrote the code using CSS and Elusien’s webvfx framework.
I opened the html file in an Overlay HTML filter applied to a clip created by selecting “open other > color” (set to a duration of 10 seconds, the same as the html code (see where it says"10:60" on the code below - which means 10 seconds long at 60 frames per second).
I am happy to report that IT WORKS!!
The exported video from Shotcut looks like THIS:
There are still problems to overcome - the text and animated dots are not centred (although I centred them manually in my Chrome browser when I created the animation. It was all centered when viewed on my desktop screen). I suspect the shotcut screen has a different resolution to my browser (?).
I am really happy that this appears to work and I will be working and experimenting with on more animations when I can find some time.
THANK you, Elusien, for your brilliant work on your webfx framework. Any comments/ suggestions would be gratefully received!
Here is the HTML code. Feel free to copy /paste and experiment. Make sure that Elusien’s file “webvfx.js” is downloaded and located in the same folder as the html file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html
<head>
</head>
<title>Webvfx test</title>
<style>
body {
background-color: #167489;
}
div {overflow: visible;
font-family: arial;
position: absolute;
opacity: 0;
}
#title01 {
font-size:150px;
color:white;
}
#title02 {
font-size:60px;
color:white;
left:630px;
top: 400px;
}
#square01 {
height: 8px;
width: 8px;
background-color: white;
}
#square02 {
height: 8px;
width: 8px;
background-color: white;
}
#square03 {
height: 8px;
width: 8px;
background-color: white;
}
#square04 {
height: 8px;
width: 8px;
background-color: white;
}
#square05 {
height: 8px;
width: 8px;
background-color: white;
}
#square06 {
height: 8px;
width: 8px;
background-color: white;
}
#square07 {
height: 8px;
width: 8px;
background-color: white;
}
#square08 {
height: 8px;
width: 8px;
background-color: white;
}
#square09 {
height: 8px;
width: 8px;
background-color: white;
}
</style>
<body>
<div id="title01" data-control="8:60" class='webvfx' data-animate='{start: 0, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:530px; top: 200px;},
100% : {opacity:1; left:530px; top: 200px;}
}'>Bournville</div>
<div id="square01" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:1180px; top: 380px;}
}'></div>
<div id="square02" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:1098px; top: 380px;}
}'></div>
<div id="square03" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:1016px; top: 380px;}
}'></div>
<div id="square04" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:934px; top: 380px;}
}'></div>
<div id="square05" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:852px; top: 380px;}
}'></div>
<div id="square06" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:770px; top: 380px;}
}'></div>
<div id="square07" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:688px; top: 380px;}
}'></div>
<div id="square08" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:606px; top: 380px;}
}'></div>
<div id="square09" class='webvfx' data-animate='{start: 0.2, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; left:0px; top: 380px;},
100% : {opacity:1; left:520px; top: 380px;}
}'></div>
<div id="title02" class='webvfx' data-animate='{start: 0.4, end: 0.7, ease: "easeInOutSine",
0% : {opacity:0; transform: scale(0.96, 0.96);},
100% : {opacity:1; transform: scale(1, 1);}
}'>Heaven On Earth</div>
</body>
<script src="WebVfx.js"></script>
</html>Looking good.
The easiest way to get it centred is to enclose the DIVs within a centred DIV whose height and width have just the correct dimensions (height x width) to encompass them.
To get a centred DIV make it a child of the “<body>” element and specify it as “position: absolute”. Then specify “top” and “left” to be “50%” and set the top-margin to MINUS half the height and the left-margin to MINUS half the width e.g.:
<div id='centred'></div>
#centred {height: 200px; width: 800px; padding: 0;
top: 50%; left:50%; position: absolute;
margin: -100px 0 0 -400px;
background-color:#f00;
}
Obviously you’ll have to change the left & top values of the animated divs to be relative to the centred div, not the <body> element.
Hi Elusien, that’s fantastic - thank you for the centering advice and html code. I’ll try it out but it won’t be until the weekend if I;m lucky (sadly I haven’t quite reached the dizzy heights of retirement yet, like yourself…)
My immediate thoughts - I can see that the above code will centre the text, but I’m wondering how to handle the moving small squares to keep the centred effect, which are positioned using exact pixels measured from the left. Would I have to use lots of trial and error to position each square exactly, or is there an easier way? (I wondered if I could use a relative position in percentage (say left:36%; left:34%) etc…? Would that be compatible with webvfx?
Another idea I had to centre the animation in shotcut was to make the HTML background color of the body transparent, apply the overlay HTML filter to a transparent clip placed on a second video track, (with a coloured clip on V1) then use the size/position filter to move the whole animation into a centre position. Do you think this would work?
Looking forward to having a play with it.
Any advice on any of this would be gratefully received. Thanks again,
Jon
Jonray,
My framework can handle the animation of anything that has a number in it e.g.
- 100px animated to 222.75px;
- 10em to 15.5em
- 0.5 to 0.83
- 100% to 55.832%
- #FFF to #0a7e92
- rgba(256, 128, 53, 1) to rgba(113, 205, 177, 0.554)
- hsl(30, 100%, 40.5%) to hsl(75, 90.7%, 82%)
Regarding the small square DIVs etc, the “left” position will be relative to the left-hand side of the centred div. If you have “overflow: hidden” specified for the centred div, then the small squares will not appear outside that box. Position 0px will be right up against the edge of the centred box.
The default is “overflow: visible”, so then, if you have left: -50px, the squares would be visible, even when they are outside the centred box.
Once you have everything set positioned correctly relative to the centred box it should then also be positioned correctly in the browser and in Shotcut. the size of the browser page or resolution of the Shotcut frames shouldn’t in theory matter.
Using percentages is a good idea, as it allows the animation to grow in size to match any resolution you use.
I haven’t thought of using the size/position filter of Shotcut to achieve centring, it might be worth trying it to see if it makes it easier to do.
Once again, thank you for your speedy and comprehensive reply, Elusien, I look forward to experimenting! I will post on the forum soon to report how I get on…
Hi Elusien,
I wondered if you could help me? I’ve made great progress getting to use your HTML WebVfx framework, and solved the problem of centering the text, using your invaluable advice (3 posts above): actually I did it by wrapping the animation divs in a container div and setting the css to :
#container {
height: 1080px;
width: 1920px; /* (the default resolution in shotcut) /
padding: 0;
top: 50%;
left:50%;
position: absolute;
margin: -540px 0 0 -960px; / (half the height/width) */
background-color:#63a2d8;
opacity:1;
}
THEN: I set the main title div (“Bournville”) to width:100%; text-align:center; (and the same for the sub-title div). This centres the text nicely.
I’ve tweaked my “Bournville” animation accordingly and also made a few extra changes - but I’ve hit a problem.
When viewed in Chrome (with data-control=“8:60”) the animation looks like this (this is a screen capture):
But when imported into Shotcut’s HTML Overlay filter and exported, it comes out much slower:
Is there an easy way of speeding up the exported animation? I tried reducing the length of the clip which the HTML Overlay filter was applied to - in the timeline, but it didn’t seem to make any difference. The only way I could get it to speed up was to change the start and end times of each div. - but I don’t really understand what I’m doing with this aspect.
Also am I right in thinking that (for example) a start time of 0.1 would equate to 1 second in Shotcut and so on (ie ten times the value)?
Thanks. I hope to find a little more time today and over the weekend to experiment further…
Thanks
Jon.