HTML/CSS3 Animations now possible in Shotcut

Elusien · July 24, 2019, 9:03pm

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.

sauron · July 25, 2019, 3:01am

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.

Bird

jonray · July 25, 2019, 1:21pm

Wow, that is so cool - and clever. Good work … 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!!

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

jonray · July 25, 2019, 2:49pm

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

https://streamable.com/0gcyw

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

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

bird animation svg frame.png1920×1080 84.5 KB
Enlarged the svg (SP filter)
Added V3 and V4, copied blue colour clip to each.
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:

bird animation svg frame ONE BIRD.png1920×1080 23.6 KB
Exported this frame as a PNG.
Used SP filter and grid as a guide to advance the SVG horizontally to the left, exposing the next bird image.
Repeated no. 5 and 6 above until I had 10 pngs (one for each bird image).
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.
Chroma Keyed out the blue background. Copied the clip many times appending each on the timeline.
Saved this animation as a .mov file (transparent background).
Opened and closed SC, imported a landscape video on V1, put BIRD animation on V2.
Used Colour Grading filter to change bird’s colour to white.
Used SP filter to keyframe bird’s position so it comes in from the left and exits to the right.
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).

sauron · July 25, 2019, 4:54pm

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.

jonray · July 26, 2019, 3:30pm

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!

sauron · July 26, 2019, 3:51pm

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.

jonray · July 26, 2019, 4:00pm

Ah, OK. Clever. Thanks!

jonray · July 26, 2019, 4:05pm

Hi @elusien, did more testing - thought I’d aim high again and try to get this animation working in SC:
https://codepen.io/yoksel/pen/nxgrp
which looks like this:

https://streamable.com/ve53l

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 CHROME.zip (3.3 KB)

But when I converted it to this:
disco cube inline style EDITED 03 with INLINE style separated CONVERTED.zip (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.

Elusien · July 28, 2019, 9:41pm

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:

box-shadow:0px0px00rgba(255,255,255,0),

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.

jonray · July 29, 2019, 11:31am

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
“-webkit_transform”…
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:

https://streamable.com/p49kv
https://streamable.com/p49kv

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

Elusien · July 29, 2019, 1:04pm

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.

samth · July 29, 2019, 3:11pm

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 (https://medium.theuxblog.com/the-ultimate-guide-to-animating-drawn-text-in-html-with-css-no-jquery-needed-bcdcfdb963d8) 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.

jonray · July 29, 2019, 5:26pm

Thanks @elusien.

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

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 …

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:
https://www.youtube.com/watch?v=vJNVramny9k

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.

jonray · July 29, 2019, 5:30pm

For added information, the problem regarding the transform-style:preserve-3d issue was discussed here: https://forum.shotcut.org/t/html-css3-animations-now-possible-in-shotcut/12053/51

samth · July 29, 2019, 7:18pm

By the way, here the HTML file after the conversion: Text animated.zip (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 (FAQ | Inkscape).
I found Vivus (Vivus Instant - inline SVG animation with CSS) 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.)

Elusien · July 29, 2019, 10:04pm

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!!

sauron · July 30, 2019, 12:51am

Disco cube done with simple blank html and a gif.

Disco Cube

jonray · July 30, 2019, 12:16pm

@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 …

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)

samth · July 30, 2019, 12:49pm

That is the least I can do after all the times you helped me . 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.