@jonray, @Keno40, @Sritsod, @Luixx,
I’ve been testing out the WebVfx Overlay HTML Filter feature of Shotcut recently and have developed a framework I now use to produce animations using this feature.
Trying to develop such a feature using Shotcut alone is much harder than developing it using a browser, since the latter has a powerful set of development tools (e.g. type CTRL-SHIFT-I in Chrome). You also have access to the javascript console window to see error messages, stack traces and print debug information. With Shotcut an error usually ends up just showing a blank screen with no indication of what went wrong.
I used my framework to produce an animation in which the multi-coloured word “SHOTCUT” recedes into the distance after which the Shotcut logo approaches from that direction, increasing in size as it does so.
The animation can be seen here:
while the Overlay HTML Filter can be obtained from here:
The code runs in the browser to produce the same animation that the exact same code produces in Shotcut. If you would like to use the code and change it to tailor it to your HTML/CSS animation requirements then be my guest. There is very little of the code that needs to change in order to produce a different animation andit’s reasonably well documented.
If I get the time in the next week or so I’ll try to put together a tutorial on how to modify it, but anyone with a bit of knowledge of CSS, HTML and javascript should be able to work it out.