I’ve been experimenting with the Overlay HTML filter to create video title animations with Shotcut.
It has only been possible for me to do this with the brilliant help and guidance from forum member Elusien. He has designed a java script framework - webVfx - which enables the user to convert HTML code containing animation which can be opened in an Overlay HTML filter applied to a clip in Shotcut.
Elusien’s website is here (which contains the file WebVfx.js, essential for downloading to get these animations to work in Shotcut):
And here is a recent thread on this forum where he introduced his WebVfx framework. Worth reading! :
Because I “hijacked” his thread somewhat with lots of questions (to which I got fantastic helpful answers), I am starting a new thread.
I’d like to share some video animations I created using the Overlay HTML filter in Shotcut, in case anyone is interested in learning how to get it to work. Here is my “Bournville” animation featuring moving coloured letters. This is the exported mp4 directly from Shotcut: https://streamable.com/qw457
It took a while to do, and a LOT of HTML tweaking to get the timings and positions right, but
I attach the html code as a text file should anyone wish to experiment with it. If I get some time and some people show an interest, I will try to outline the steps I took to create this.
… And here’s another text animation I just created. It’s not a video title, but an animated collection of horizontally scrolling subtitles. It has a grey background because it’s not completed - the next stage is to make the background transparent so the moving subtitles appear above a video or slideshow. The content of the text is quite silly, so ignore that! I just made up random stuff so I could experiment with the timings.
Here it is: https://streamable.com/okplp
I’d be interested in seeing the result of your hard work, but the videos won’t play. The error message reads, “unsupported video type or invalid file path”. That’s in IE. In Firefox it says, “no video with supported format and MIME type found”.
Hi Keno40,
Sure.
These have been saved as .txt files, so I can upload them on this forum. To use them, download the file then change the extension to .html. (apologies if you knew that already).
PS - for the “Scotland” animation to work as you can see in the above video, you need the font “adequate” installed on your computer. It is readily available for download from the web, just Google it.
Thanks, but they work fine above now I’m back home and using Chrome. Very impressive - anything that makes animation easier gets a big thumbs up from me!
I’ve dabbled a bit with frame by frame pics shown as a sequence, but it’s not very practical… or fun.
This is awesome! Great job!
You don’t know, but I looked for a trick for making two texts fading in in two different moments remaining both visible for a year and you showed how to make it.
I’m using Windows, but the Overlay HTML filter is part of Shotcut and as such should be independent of the operating system. My WebVfx framework that Jon used to create the effects is also independent of operating system. Try it and see.
I see the flag to enable WebVfx library on Windows, thank you for your work, have plans to try making something interesting with this feature, pity I can’t yet try on my primary OS Linux.
By the way, I’ve found a missed feature: when the playback is rewinded, the Overlay HTML should be Reloaded, otherwise I have to click Reload button all the time to get the same result. Good that render does this reload.
