HTML Overlay missing in version 21

[AndyB]

Hi there,

Recently I’ve got to really, really like Shotcut - it’s so easy to use - when you’ve learnt how!

I’ve been trying to use the WebVfx.js movie credits type thing in Shotcut version 21, and the Overlay HTML Overlay filter is no longer available in my latest version of Shotcut.

I’ve read online that HTML Overlay doesn’t work with the new version, but that it does work with Shotcut v20 and have got it working there, but is it possible to get it to work in Shotcut v21?

I am a website developer and know HTML, Javascript and CSS really well, so would really like to make more use of the HTML Overlay - if it’s possible.

Incidentally loading my html file in Google Chrome web Browsers shows that the javascript (js) and HTML files do work - they scroll beautifully.

Cheers
Andy

[Elusien]

I’m afraid not - see here for other options:

What to do if/when WebVfx disappears

There are several “use cases” for WebVfx in Shotcut. Some of which can be replaced using keyframes instead e.g. simple scrolling credits, both vertical and horizontal. Other effects cannot easily be replaced by keyframes, such as complex text animation, image (de)fragmentation, explosion/implosion and filters that manipulate the video frames, like “persistence”, “sniperscope” and other WebGL operations such as transitions and so on. For me there are two main options to work around the fact that…

[Elusien]

There is a scroll option on both the Text: Simple and Text: Rich filters, the latter can accept a subset of CSS to style the text.

Version 20.07 was the last version that supported WebVfx. So these days I record most of my HTML/CSS/Javascript effects in OBS Studio as “Browser Sources” and import the clips into Shotcut. See my website here for more information (and for some new effects using SVG and Javascript):

https://elusien.co.uk/shotcut/resources/index.html

[AndyB]

Thanks for this information. Elusien.

I’ve done quite a bit with Text: Simple, but I cannot find the “scroll option” on it in v21. Am I being stupid?

I will certainly have a look at OBS - when I’ve. time. I presume that you use both OBS and Shotcut (SC)?

Also, can you direct me to a good tutorial on “keyframes”? I don’t understand these at all.

Your website certainly contains other things I could look into!

Thanks
Andy

[Elusien]

Yes, I record the HTML animation in OBS and use the clip in Shotcut. There is a good OBS tutorial here:

https://www.youtube.com/watch?v=ySENWFIkL7c

Text: Simple and Text: Rich can be scrolled by clicking on Preset when in the filter then choosing what type of scroll or slide you want.

For Keyframes @bentacular has a good tutorial here:

How to use KEYFRAMES in Shotcut

My most requested tutorial is done! How to use keyframes in Shotcut. Enjoy!

There is also a very good tutorial on many features here:

Shotcut Tutorial 2021!

Hi everyone! Here is a “Shotcut Tutorial 2021” I just published on YouTube yesterday, 01-18-21, using the current version of the software, and covering a full tutorial (video editing, transitions, text, shapes & colors, effects, green screen, keyframes…). A user (BungurTube) kindly commented “Great tutorial - you must share it to shotcut forum”. Thanks! So here goes…my first post, let see if pasting the video web address works… [Shotcut Tutorial!]

[bentacular]

Thanks for the shout-out!

[lukemchale]

@Elusien - Thanks brother!

[AndyB]

Elusien,

thanks for your advice. I haven’t yet looked at the OBS, or the Shotcut Tutorial 2021, but have looked at Bentacular’s vid.

It explained “keyframes” brilliantly! I understand these now. Just one improvement I’d suggest is that on ShotCut v21 “Rotate and Scale” is now called “Size, Position and Rotate”.

I also looked at some of Bentacular’s other vids and the Star Wars crawl one helped me to do my end-credits scroll using Key Frames - so thanks to Bentacular - again!

Cheers
Andy

[bentacular]

Glad I could help!