Creating video title animations in Shotcut using the Overlay HTML filter

Help/How To
1

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):
http://www.elusien.co.uk/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.

Text file:Video title animation by Jon Raybould (Bournville with moving letters).txt (6.5 KB)

1 Like
2

… 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

HTML code (as a text file):Scrolling subtitles animation test (dog) using WebVfx by Jon Raybould.txt (4.8 KB)

1 Like
3

And a couple more which I recently posted on Elusien’s thread.

All of these can be done with Shotcut’s Overlay HTML filter and exported directly from Shotcut.

Hope it helps someone!
Regards,
Jon

1 Like
4

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”.

5

Works perfectly for me with Chrome

6

Hi,
Could you give html for this too?
It could help people.

7

Just tried Chrome and get the same issue. It’s probably something to do with our config at work. I’ll have a look later when I get home instead.

8

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.

Video Title Animation by Jon Raybould HTML and WEBVFX - Bournville fade in with moving white boxes.txt (3.7 KB)
Video Title Scotland Land of Mountains HTML WbVfx experiment by Jon Raybould with fade out TEXT FILE.txt (2.1 KB)

Hi dreamkatcha,
I uploaded the videos to Streamable.com. Are you able to view other videos from other sources?

1 Like
9

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! :slight_smile:

I’ve dabbled a bit with frame by frame pics shown as a sequence, but it’s not very practical… or fun.

10

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.

11

Guys, anyone using Shotcut for Linux? Is there Overlay HTML filter or only for Windows?

12

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.

13

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.

14

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.