Creating lower third graphics with WebVfx

Hi all,

Don’t know if it’s been tried before, but had an idea to use the webvfx @Elusien created to animate pictures instead of text.
Tried it out and works pretty well, it’s an easy way to create lower third straps/graphics.

First create the strap/graphic in your favourite package and save it as a png with alpha.
If you haven’t already, grab the webvfx.js file from here:

The latest version is 1.11.
I renamed mine to “WebVfx111.js” so I wouldn’t get confused with other versions.

I’m going to assume that those who want to try this are already familiar with html and webvfx.
For those that aren’t, I highly recommend the tutorials created by @jonray.
Do a search on this forum.

So when you use the attached html files, DON’T tick "Use WebVfx JavaScript Extension"

As long as you put the latest version in the same folder as the html files, it will be found.

You will see there are two versions.
The first one called “Strap1” grows and shrinks.
This is done by specifying a percentage of the png in the width and height of the html code.

The second version, “Strap2”, does a wipe in and out, this is achieved by not specifying anything for width and height.

Feel free to tweak values of the different parameters.


Hope this gives others some ideas on how to “misuse” WebVfx to achieve different effects. :grinning:

Here are all the files minus the video clip: (100.2 KB)

Shotcut does not provide a WebVfx.js. Rather, it provides the real WebVfx technology, which includes a web runtime, integration with Qt and MLT, and a Javascript extension. @Elusien created WebVfx.js, which is a little confusing.

Thanks for the clarification, I was always a bit confused as to the differences, version numbers and capabilities.

I realised some time ago that this was the case. If I had thought about it more when I created the framework I would have used a different name. At the time it seemed logical to call a framework that used MLT-Shotcut’s WebVfx environment as the underlying technology “WebVfx”, but on reflection it should have been called something else.

Ok Paul, it’s interesting. I wanted to try another .png image by editing the file and saving it but I have no result. Do you have any idea why?
Beautiful day.

I’m not sure why your example works as well as it does since my framework needs to use Shotcut’s underlying WebVfx environment. The webpage states (though not as prominently as it should:

When you use the HTML Overlay Filter in Shotcut itself, do not forget to check the box to say it uses WebVfx, and confirm that you know what you are doing.

I will change the webpage to state this more obviously and try to alleviate the confusion between “elusien’s WebVfx framework” and “MLT-Shotcut’s WebVfx javascript extension”.

Thanks @Elusien changed my original post to make it more noticeable.

Several reasons come to mind:

  1. Did you download Elusien’s WebVfx ?
  2. Don’t tick “Use webvfx javascript extension” is SC
  3. Did you rename it to WebVfx111.js (as it’s called in the html) ?
  4. Did you put it in the same folder as the extracted html file and png ?

I have updated the webpage. It now states at the very top of the page:

THIS FRAMEWRORK IS NOT A REPLACEMENT FOR MLT-SHOTCUT’s WebVfx JAVASCRIPT EXTENSION in fact it uses that extension to synchronise the animation with the frames generated by Shotcut.

I have also changed the table to show only the latest version.

Thanks @Elusien

BTW, it also works on animated gifs.
Below an example where the background is just a still but I pan using keyframes.
Then use an animated gif in the html file.

The animated gif has the frames to simulate walking and the actual “offset” is done with the moving background still.

Files: (209.6 KB)



Oh I like that. Maybe have a video timed such that the little guy just misses being run over by the mini. I wouldn’t like to see him as road-kill.

The little guy will be squashed like a bug. :grinning:

I wouldn’t like to do a whole animation sequence this way, it’s certainly doable but will be rather tedious.
There are programs better suited to animation, but for a “quick and dirty” way, SC and WebVfx is certainly an option.

Here is another example where keyframes in SC are not needed.
All done in the html file.

Some important notes shown below:

Files: (23.9 KB)


Hi @paul2,

Nice examples.
Thanks for posting this - the html file is interesting - I’ve not explored animated images too much yet, and didn’t know about the “background-position” attribute. A question, though - do you need both “left” and “top” attributes as well as “background-position”? Don’t they do the same thing?

The backgroundPosition seems to over-ride left and top, however I left them in as WebVfx and html/css have some funny quirks.
An example of this is the need for opacity:0 in the img src tag.
This way I could experiment with left, top and backgroundPosition.

In theory, even video could be used instead of just images.

You could also use the Text HTML blank HTML template for the animation. Insert the gif. Apply to a transparent clip, then position and animate with the SP filter.

Or use the simple scroll template and position the gif with the SP filter.

1 Like

Another nice alternative.
Really liking these unorthodox methods of creating animations and other effects.

BTW, in your first video, poor old Craig looks a bit inebriated by the way he is walking.:grinning:

His GF dumped him, he’s been hitting the bars.

LOL, explains why he keeps trying to end it all by walking in the road :smiley:
@sauron, couldn’t you just import the gif and us the SP filter without the need for HTML at all?

Tried it. The convert to edit friendly box popped up. Converted the gif but it did not work. Html works best for gifs.