From what I understand, the HTML+CSS+WebVfx for SC only support some of the features of the full spec.
I have found it to be quite difficult to adapt some animations and effects to SC.
No doubt, a large part being that I haven’t spent enough time learning about all the limitations and hence find workarounds, as per my examples above.
What might also help is to read what @Elusien posts on the subject.
He is the local guru on all things HTML+CSS.
Also search for posts by @jonray , he often tries things in HTML+CSS.
@K_K - As it happens, I have JUST (a few hours ago) posted my new set of 4 tutorials (total viewing time 80 minutes!) called
“How to create animated video titles using the Overlay HTML filter in Shotcut” on Youtube:
Here’s PART 1:
EDIT: I just uploaded the FINAL version of Part 1, with a couple of minor corrections. The above link is current. I have delete the previous version, so I have lost the 2 “likes” I had already received for it … if someone on this forum “liked” it, thank you.
@K_K - as Paul2 says, unless you already know a bit about HTML/CSS it is quite difficult to adapt the examples you give on CodePen. Shotcut uses WebVfx to animate things whereas the examples use the “@keyframes” method.
Maybe my tutorials will give you a feeling of what’s involved in adding animated text and lines to a video via the Overlay HTML filter in Shotcut.
Hi @K_K from China! I just did this:
Made a screenshot of the codepen animation using Sharex,
Imported into SC,
Applied a crop filter to isolate the blue spinner,
Put it on V2 with a black colour clip on V1,
Applied a chroma key filter to remove the grey,
Export as an MP4.
You could then import this into your video and chroma key out the black again to make it transparent, then use the Size/position filter to put it where you want. Greetings from UK…
I have just finished the first filter. I’ve been chasing a problem for the last week and finally found the reason for it only this morning (thanks to Dan for pointing me in the right direction). I shall be making the the filter available for people to use within the next day or so.
I hope then to be able to provide documentation and code for people to use for their own animations within the next week or so. It important not to rush it as I want to make it as easy as possible for people with little or no coding experience to use - watch this space.
To give you a taste (NOT THE FINISHED ARTICLE BY ANY MEANS, which supports ui.qml front-ends and keyframes), the spinner HTML is a here: Spinner.txt (50.6 KB), just replace the suffix "txt" with "html" then use the Overlay HTML filter, tick the "Use webvfx" box and select this HTML file. You can also run it in a browser window (Google Chrome preferred).
This is called a polyfill. There are all sorts of polyfills for various new HTML5 capabilities to make them compatible across browsers. Shotcut comes with a fairly old version of WebKit that does not support everything and some things in CSS require using a “-webkit-” prefix.
Yes I used this as the basis for my latest filter, thanks for providing this.
What I’m trying to do is make this development of scripts easier (the majority being done using the extensive tools available in the various browsers) and to be able to integrate them with a foolproof way of producing ui.qml & meta.qml files, so that they can easily be parameterised in the way “normal” filters can. This will extend the capabilities of Shotcut and will help me and I’m sure quite a few Shotcut users without needing to know a lot in the way of coding.
No, you are not doing anything wrong, I tried the same thing.
The spinner is a clever use of CSS animation. There are no images involved. However, it will never work with a transparent background.
Basically it creates 3 DIVs. It sets the borders for each to 50% to make the divs circular, It fills 2 of them with a gradient pattern, one offset by 90 degrees from the other. It then fills the 3rd die, which is slightly smaller with a backround color equal to the webpage’s background, to “cut out” the middle of the other two divs to make them look like a ring, then animates these divs to produce the spinner “ring”.
So if you make the background transparent and the inner div transparent the “ring” effect will not work, as you (and I) found to our cost.
So you can only use this animation effect on a coloured backgrount, not a transparent one, since making the 3rd ring transparent shows the gradients, rather than obscuring them - sorry.
I did it manually, but am working on the system to try to automate the majority of the code and the production of the “ui.qml” and “meta.qml” files to create fully configurable Shotcut filters. That is what I hope to showcase soon.
You could always use the clip with the grey background and chromakey out the grey clour - although then the lighter grey of the semi-transparent parts will show through…
Sounds cool! Would the user be able to say, for example, take a codepen example, copy the HTML, paste it into a generator field, then copy the CSS, paste that into another field, and generate the full code that way?