HTML/CSS3 Animations now possible in Shotcut

I think you are right. The idea is to have the 10 sub-images as the background image, with the size of the div chosen so that only 1 is shown. Then every tenth of a second the background is moved instantly to expose the next sub-image. It looks as if the animation polyfill cannot handle this.

A possible workaround is to use a ‘linear’ easing instead of the ‘step(10’ and have the following keyframes:

fly_cycle : [
    {offset:0,  backgroundPosition: "0px"},
    {offset:0.099,  backgroundPosition: "0px"},
    {offset:0.1,  backgroundPosition: "-90px"}
    {offset:0.199,  backgroundPosition: "-90px"},
    {offset:0.2,  backgroundPosition: "-180px"}
    {offset:0.299,  backgroundPosition: "-180px"},
    {offset:0.3,  backgroundPosition: "-270px"}
    {offset:0.399,  backgroundPosition: "-270px"},
    {offset:0.4,  backgroundPosition: "-360px"}
    {offset:0.499,  backgroundPosition: "-360px"},
    {offset:0.5,  backgroundPosition: "-450px"}
    {offset:0.599  backgroundPosition: "-450px"},
    {offset:0.6,  backgroundPosition: "-540px"}
    {offset:0.699,  backgroundPosition: "-540px"},
    {offset:0.7,  backgroundPosition: "-630px"}
    {offset:0.799,  backgroundPosition: "-630px"},
    {offset:0.8  backgroundPosition: "-720px"}
    {offset:0.899,  backgroundPosition: "-720px"},
    {offset:0.9,  backgroundPosition: "-810px"}
    {offset:0.999,  backgroundPosition: "-810px"},
    {offset:1,  backgroundPosition: "-900px"}

Again, I can’t test this out yet.

1 Like

Couldn’t get the generator to work for me. Too complicated.
Liked the bird animation. Got it to work with Text HTML a gif and SP and RS filters.



Wow, that is so cool - and clever. Good work :+1::+1: … I think I’ll have a go at it too in 2 ways - 1) with HTML and 2) without.

@sauron - If I fail doing it the non-HTML way, I’ll be asking you how you did it!!:grin:

Ah, yes, @elusien I can see how that could work. I’ll experiment.

So here is a quick demo of my “Bird” animation done without HTML:

I probably did it by using a different method to @sauron.
This is what I did:

  1. Imported the “Bird.svg” into SC, onto V2, blue colour clip on V1:

  2. Enlarged the svg (SP filter)

  3. Added V3 and V4, copied blue colour clip to each.

  4. Used SP filters to block out a) left side of preview window (V3) and b) right side (V4). Moved SVG to the right with SP filter.
    This left one bird image in the centre:

  5. Exported this frame as a PNG.

  6. Used SP filter and grid as a guide to advance the SVG horizontally to the left, exposing the next bird image.

  7. Repeated no. 5 and 6 above until I had 10 pngs (one for each bird image).

  8. Closed then opened SC, imported all PNGs as an image sequence. I used 4 frames for each PNG whichg gave quite a slow bird flight animation.

  9. Chroma Keyed out the blue background. Copied the clip many times appending each on the timeline.

  10. Saved this animation as a .mov file (transparent background).

  11. Opened and closed SC, imported a landscape video on V1, put BIRD animation on V2.

  12. Used Colour Grading filter to change bird’s colour to white.

  13. Used SP filter to keyframe bird’s position so it comes in from the left and exits to the right.

  14. Added the audio track.

@sauron - was your approach different? It would be nice to know how you did it if so! (Only if you have the time, no worries if not).

I had a totally different approach.

Saved bird-cells.svg. Opened it in Gimp. Extracted each bird image…Using the 10 images created an animated gif with Gimp.

In SC made a blank html. Put it on a transparent clip. Added the gif to it.

Added the background image below it. Animated the background with SP filter. Also added a bit of animation to the bird with RS filter.


Hi @sauron, (sorry, couldn’t get to reply yesterday…)…
Thanks for the details of how you did it. In a way we had the same basic thought - ie to isolate the individual bird images and make them into a movie before overlaying it. I did it with “image sequence” in SC, you did it in GIMP as a gif. Interesting.

BTW can I ask if you could post your HTML file that allowed you to import the gif into SC? I’m guessing it’s just a simple file pointing to the gif. Thanks!

I just created a blank hrml using the text HTML template. Gave it a name, then used the edit insert image in the html editor to point to the gif.

Bird.htm.txt (396 Bytes)

Use an animated gif because it’s in a loop. The bird can fly for 10 seconds or 10 minutes. Just need to stretch the clip. Also, the speed can be changed by editing the gif in Gimp.

Didn’t think to use an image sequence. Tried it last night with the images created with Gimp. It didn’t work for me so evidently I’m doing something wrong or something’s broken with the images.

Ah, OK. Clever. Thanks!

Hi @elusien, did more testing - thought I’d aim high again and try to get this animation working in SC:
which looks like this:

I tweaked the HTML to get this (I separated out the animations and keyframes):

disco cube inline style EDITED 02 with INLINE style separated WORKS IN (3.3 KB)

But when I converted it to this:
disco cube inline style EDITED 03 with INLINE style separated (6.1 KB)

it wouldn’t work in Chrome.

I hit F12 to debug and Chrome doesn’t seem to like the first line of the “rotate” animation:

Thought you may be able to shine some light on this? Many thanks.

Jon, only just seen your post. The problem is with your “rotate” keyframes. You should have got rid of the “-webkit-transform” line(s) when you copied in the utility, i.e. just keep the “transform” line(s).

@keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);

The second problem is mine: I cannot handle the spaces in the “shadows” keyframes e.g.

box-shadow: 0px 0px 0 0 rgba(255, 255, 255, 0),

My translator removes these (a mistake) to produce:


which of course is gibberish. I’ll have a look at this tonight - out all day with family. I think I have a way of using the keyframes as-is, without having to translate them.

Hi @elusien, no worries at all. Glad you are having time with your family visiting.

I’ve adapted the HTML file to retain the spaces. Also removed all the -webkit- prefixes, except for
Disco Cube animation 09 CONVERTED Jonray (working in CHROME but not in SC).zip (4.7 KB)

It works fine in Chrome (even with the animations commented out), but not quite in SC. I get only one side of the cube rotating. This is the exported video from SC:

I think I’m nearly there but could do with your expert help getting me over the final fence !! :grinning:

Glad to see you got it working in the end on Chrome. Unfortunately you won’t be able to get it to work in Shotcut because of the old version of the webkit browser engine it uses, which does not support transform-style: preserve-3d; and this is needed to show the 3D aspect of the animation.

I came up against this restriction when I first was developing my WebVfx framework and was hoping Dan would at some stage update to a later version of QTs webkit engine, but this required too much effort on his part.

However, I think I’ve found a way to get the animations (not 3D) to work without having to put them through the converter (i.e. using the CSS as-is). I’ll do the first testing of this tonight.

I tried an animated text based on a SVG file/code. It took quite some time to figure out how to achieve a SVG code which works in a browser but the conversion with the generator worked well. Following this tutorial ( but adapting it to Inkscape results in this animation:

Does anybody have experience with a simple SVG creation tool which can create outlines and is generating code which is compatible with browsers? It is way too much hassle to accomplish a clean SVG file with Inkscape.

Thanks @elusien.

Ah yes, I seem to remember you telling me about this problem quite a while ago. (I had forgotten…:roll_eyes:)

At least I got the rotation working, so it was a useful learning exercise.

Sounds wonderful, look forward to seeing what you’re cooking up …:grinning:

Wow, @samth, now there’s something that interests me!
I had a look at that tutorial. Looks quite complex but it I will enjoy studying it and seeing if I can come up with something…

It’s all new to me but a quick Google search of “convert svg text to html code” led me to this:

which looks really interesting. Looks as though he uses Figma to create svg information from text; then he copies this into a HTML document. Good news is that there’s a free version of Figma. I am interested! I will explore when time allows.

For added information, the problem regarding the transform-style:preserve-3d issue was discussed here:

By the way, here the HTML file after the conversion: Text (2.0 KB)
At the beginning it was a bit intimidating but the parts concerning creating the SVG and applying the animation in the HTML file were quite easy to accomplish. But the transfer to the HTML file was challenging. It was Inkscape’s overhead and a weird implementation (flow text is not supported by browsers and therefore not in Shotcut as well) which was quite the hurdle (
I found Vivus ( which can be used to create keyframes as well as animations and see changes immediately. It is a neat online tool which shortens the coding time a bit.

I saw this video as well which is kind of the visual representation of the linked text and helped me to understand the process.
I am a bit apprehensive about Figma since it is an online tool which requires yet another account and I really dislike the amount of accounts I have to create for so many tools. I would rather use a portable software.
Could you perhaps tell me about your experiences after trying it out? (A personal message is probably better to not clutter this topic too much.)

The idea was to use a method called getAnimations to obtain a list of CSS animations and operate directly on them. Unfortunately although the polyfill I use is supposed to support this, it doesn’t for CSS animations. There is a bug report on Github for this but it’s been there since January last year with no response from the team so I suspect it will not be fixed (at least in the short-term). So I’m back to fixing my converter - hey-ho!!

Disco cube done with simple blank html and a gif.

Disco Cube


@samth, thank you so much for the HTML file and detailed information on SVGs, inkscape etc… There’s lots there to keep me busy and I will explore this fascinating subject when I can.
I will also have a look at VIVUS - looks intriguing.

Yes of course. I have signed up to Figma. I think the free version only allows you to make 3 designs though. I will try it out - but I’ve no idea when since I have quite a few little projects on the go (including a bit more testing for @elusien’s HTML generator…). All this learning new stuff certainly takes up a lot of time!! I’ll be in touch…

Oh dear, hope it won’t involve too much work. Eager to try it out when you’ve made the tweaks.

Well, well, that is so cool! Now you’ve got me scratching my head how you did it with a gif …:roll_eyes::grinning:

I would have probably done a Sharex screen capture from either the codepen site or from my HTML file rendered in Chrome, and saved it as an mp4.
Disco Cube animation 09 CONVERTED Jonray (working in CHROME but not in SC).zip (4.7 KB)

That is the least I can do after all the times you helped me :smile:. I held back since I do not know your process of trying things out and learning new techniques. But I had to inform you about the most time consuming annoyances which definitely do not help you understand more. Feel free to ask me if you encounter a problem.