WebVfx HTML Overlay Filters Update - Slideshows, Exploding Text


I have updated my WebVfx framework to version 1.1, which has some new features, namely Slideshow and Exploding Text. The webpage:


has been revamped and updated. The new Javascript file can be downloaded from there. The original posting has more information:

another post that shows what can be achieved is:

Typewriter effect
Workaround for adding hardcoded subtitles in ShotCut?
How to use HTML Overlay for SVG files for adding LOGO to my video
Hebrew Translation

Fantastic, brilliant! Thank you so much for your amazing work, Neil. The exploding text in your TERMINATOR video credit is amazing. I will be playing with this, and the slideshow aspect a lot. Also, your Frames to Time utility is genius - that will really make timing subtitles so much easier. Jon


@jonray, @Alex_Wright, @john_solo
The latest update (version 1.2) is now available on the website:


It adds a “type: splitting” option to slideshows, in which each image is split in half (horizontally if using "from: left/right’, vertically if using “from: top/bottom”). Each half then slides in from opposite sides to create the whole image at the end of the transition.

This new option can be CPU-intensive, but it is worth it.


Thank you, Elusien, great news. Looking forward to experimenting. Could be in a little while though - busy with a few other things, including enjoying the UK weather (at last!!) :sunglasses::sunglasses: Also trying to find time to play with the keyframes feature in 18.05, and also doing some music stuff. I’ll report back when I’ve had a go with your new webvfx framework. Jon


@jonray, @Alex_Wright, @john_solo, @sauron
I’ve added yet another feature (Fragmentation) to the framework (v1.3)


This is similar to Explosions, but whereas Explosions explodes text into individual characters, Fragmentation slices an HTML element, which can contain anything: text, images, tables, you-name-it, and then animates these individual fragments. The only requirement is that the HTML must have the attribute “position: absolute;”.

An example can be seen here:



Absolutely brilliant.


Elusien, that looks VERY good. Excellent in fact !! :+1::+1:

Gosh, I have so many things to experiment with now - your slideshow, exploding text, fragment effects, SC keyframes…

I did have a quick go with your slideshow and it worked as a html but I didn’t get a chance to import into SC. Will post the result when I get a chance…


I’ve just completed my final update (v1.4) before I go on a golfing holiday for a few weeks.

Frequently it is important that HTML elements are centered on the screen, either horizontally, vertically or in both dimensions. This can now be done relatively easily by using the ‘data-center’ attribute on the element that needs to be centered. (NOTE the American spelling ‘er’, not the British spelling ‘re’). This attribute can take the value of:

  • "h" - for centering horizontally;
  • "v" - for centering vertically;
  • "vh" or "hv" - for centering both horizontally and vertically
  • See the webpage for more information.


    Fragmentation, is really cool. I mean REALLY !!!


    I downloaded the WebVfx.js file, what do I do next? How to install it?


    Just reference the WebVfx.js file in your HTML, preferably just before the terminating ‘<html>’ tag. e.g.

    <script src="WebVfx.js"></script>

    if the Javascript file is in a different folder from the HTML file you will have to include that. See the examples on: http://www.elusien.co.uk/shotcut/


    Put html modified and the JS in the same folder
    add filter “html”
    Tick the WebVfx.js
    Link the html (NB it will import it) and it should load