Hi everyone,
Looking for some help. Willing to pay for someone for a tutorial about this process.
SITUATION
There are different animations I would like to add into my shotcut videos from codepen, an example is :
https://codepen.io/glosie/pen/GgqBXR
I assume I would need to use the HTML overlay filter in Shotcut to do this.
QUESTION
Im really having issues about how to add the HTML & CSS code from Codepen into the Shotcut using the HTML overlay filter.
HUGE thanks in advance
Using the html overlay filter is one way to add a “spinner”.
There are other ways, using a video clip of a “spinner” and trying different blend modes on a top track,
or even using chroma key.
Some examples below followed by a zip file with 2 clips of different “spinners”.
Spinners.zip (23.9 KB)
Hi Paul,
I really appreciate the fast feedback I would like to know how to do the general concept of importing HTML +CSS via overlay HTML filter. Pencode has a lot of different code I would like to implement,
I am willing to pay for a tutorial for someone teaching me the general concept of this.
Cheers
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.
yah cheers for that, i did see something like that, I am wondering how people actually do animation in SC.
Thanks, @Paul2 for the shoutout…
@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.
cheers for that! will have a look now
Another way i was thinking if something converts the HTML & CSS to a GIF file then upload the GIF as a video track. I would be just as happy with that.
However, the tools I found online were not crash hot. Further more, to upload them onto the converter, they would be two separate files? A HTML file and an CSS file?
Thanks, from China
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.
Result:
https://streamable.com/pgiwd
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…
The problem with CSS animation, a lot of examples of which are on Codepen, is that there is no way to synchronize the CSS animation with the video frames that Shotcut deals with. They don’t work! You need to convert the CSS animation to animation using Javascript and then use the Overlay HTML filter with the MLT webvfx library to synchronise the animation frames with the video frames.
My webvfx framework (www.elusien.co.uk/shotcut) was the first attempt to produce some useful animations for people who weren’t experts at coding javascript. But it is too rigid and I’ve been looking for an alternative for a while.
The W3C web committee has proposed a new way of producing javascript animations that mimic and extend those produced by CSS and there is a javascript library that does this. I have been “messing about” with this for a couple of weeks now, with the aim to provide a relatively simple way for users of Shotcut to convert CSS animations that are readily available on the web to use this Javascript interface to translate these into filters to use within Shotcut.
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 the Web Animations API.
and there is a javascript library that does this.
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.
The Overlay HTML filter comes with a template called “Simple Scroll” that uses this to show how to make a basic animation of the entire document. It also comes with a template called “Blank with Web Animations” that you can use to create your own by using the visual editor to lay down some basic content and then switch to the Source tab to put in some custom JavaScript for the animation. Beware that you can easily hang Shotcut with a bad script.
The other HTML-based filters demonstrate doing JavaScript animation outside of Web Animations API using the WebVfx JavaScript extension (to synchronize the animation with the time in Shotcut) and to demonstrate various HTML graphical techniques using canvas and WebGL.
Yes I used this as the basis for my latest filter, thanks for providing this.
This is the main problem with developing javascript scripts in Shotcut, along with the fact that debugging is very difficult in this environment.
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.
Hi @elusien, the spinner html file works geat - result:
https://streamable.com/f0xo7
https://streamable.com/f0xo7
The code in the spinner.html file is WAY above my head - was it generated with your new system?
Thanks for the spinner, works great but I have a problem with transparency.
If I set the body background to transparent, the inner part of the spinner still has a BG colour:
However if I set the inner to transparent, it then looks odd:
No doubt I’m doing something wrong.
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?
I’d like to say yes (that is the goal), but at the moment I am not absolutely sure, a minimum amount of coding (a few lines only) may be necessary.
