HTML/CSS3 Animations now possible in Shotcut

Elusien · July 19, 2019, 9:02am

@jonray, @sauron, @samth, @Keno40
I have finally put my new CSS3 animation utility on my website at:

http://www.elusien.co.uk/shotcut/animations/index.html

Basically you can produce a normal HTML/CSS animation (or get one off the web), feed the keyframes and the animation parameters into my utility, click a button and hey-presto you have some text that you edit back into your HTML file (after deleting or commenting out the original animation parameters in it). There are some restrictions which are detailed on the webpage.

There are two javascript files you need to download from the website in order to run the resulting HTML filter.: jQuery (a JavaScript library designed to simplify HTML DOM tree traversal, manipulation and events) and elusien_cssanims2js.js (the “glue” between Web Animations (Polyfill) and Shotcut-MLT’s WebVfx). These can be obtained from the webpage.

Simple example HTML/CSS

<!DOCTYPE html>
<html>
<head>
<style> 
  div {
    width: 100px; height: 100px; background-color: red; position: relative;
    animation: myfirst 5s linear 2s infinite alternate;
  }

  @keyframes myfirst {
      0% {background-color    :red; left:  0px; top:  0px;}
     25% {background-color: yellow; left:200px; top:  0px;}
     50% {background-color:   blue; left:200px; top:200px;}
     75% {background-color:  green; left:  0px; top:200px;}
    100% {background-color:    red; left:  0px; top:  0px;}
  }
</style>
</head>
<body>
    <div></div>
</body>
</html>

What you would do is:

split the CSS clause for the “div” into two, so that the animation part is separate:

div { width: 100px; height: 100px; background-color: red; position: relative; }
div { animation: myfirst 5s linear 2s infinite alternate; }

copy the keyframes (including the “@keyframes” keyword) into the first textbox of the utility;
copy the whole of the animation line into the second textbox, then delete it from the HTML file (or comment it out e.g. by changing the word ‘animation’ to ‘Xanimation’;
insert the framerate in the third textbox;
click the "generate’ button.

Then you would copy the resulting Javascript code into your HTML file (just after the tag that says ‘<head>’ and save the chages.

You now have an Overlay HTML (Text: HTML) filter. You can run it in a browser and test any modifications that way. When you are happy with the result you can then use it in Shotcut. DO NOT FORGET TO TICK THE OPTION TO SAY YOU ARE USING WEBVFX.

Why not have a try with the simple example above?

jonray · July 19, 2019, 12:28pm

Hi @elusien, looks like a very useful tool! However, I can’t get it to work right now. What am I doing wrong?
I took your sample HTML code above. Pasted into notepad++, saved it as, say “elusien”.
Pasted the code as per instructions into your genarator as follows:

Generated the javascript.
Copied and pasted into HTML file, renamed it “elusien changed”.
Deleted the animation line.
It now looks like this (spread over two screenshot jpgs to fit all text in):

Then I opened SC, set up a colour clip on V1 and applied the “elusien changed” HTML file, but nothing happened.
I have the JQUERY and the cssanim2 file in the same folder as the HTML file.

I must be doing something wrong…??

Paul2 · July 19, 2019, 12:41pm

@jonray

In the screenshot above, I see a . . / which means go back two directories.
Try taking out both . . /
(Since you have the html and both js files in the same directory).

jonray · July 19, 2019, 12:49pm

Ah, Ok thanks @elusien, will try it. Does the rest of the code look Ok?

Paul2 · July 19, 2019, 12:50pm

No idea, just spotted the . . /
I’m sure the real @Elusien will answer shortly.

jonray · July 19, 2019, 12:56pm

Opps, sorry, didn’t see your name, I assumed you were Elusien. Hi!!

@elusien, it’s still not working. The playhead stays still when I press play.

Paul2 · July 19, 2019, 12:58pm

@jonray

No worries, I just came across your post earlier as I’m also very interested in @Elusien 's new creation and will be giving a test drive shortly.

Elusien · July 19, 2019, 1:46pm

Silly question, but did you tick the box that says you’re using WEBVFX. I just ran the example in shotcut and it works fine for me.

I’m expecting users to have a folder/directory structure that looks similar to:

    animations
    |----> overlay_1
    |        |---> filter1.html
    |----> overlay_2
    |        |---> filter2.html
    |----> elusien_cssanims2js.js
    |----> jquery.min.js

That way the user doesn’t have the multiple copies of the two javascript files in every overlay directory. Hence the ../

Anil · July 19, 2019, 1:49pm

Hey Jon!!
Did you ran the html file in a browser…is it showing anything there?
Did you checked the option using Webvfx?

jonray · July 19, 2019, 3:12pm

You mean this one in SC? Yes, I did:

Ah, sorry to be dense but I’m not quite getting this bit - I’m only using one folder which has the two JS files and the new HTML file in it. Can’t quite follow the 2 overlays and 2 filters part of your diagram above.

jonray · July 19, 2019, 3:26pm

Hey Anil! No, it won’t. I’m definitely doing something terribly wrong. I will keep trying…

Elusien · July 19, 2019, 3:28pm

OK, if you have the two .js files in the same folder as your html file then edit the html file to delete the string ‘../’ in front of these two files.

If you have already done this can you look into the Shotcut log to see if there is an error message. Better still run it in a browser and look at the javascript console (function F12).

Your resulting HTML file is identical to mine (which works in Shotcut and in a browser), so it can only be the location of the javascript files.

Often you have more than just an HTML file when you develop a Text:HTML filter. You may have some .images (.png, .jpg), you may also have some other assets additional javascript files or CSS files. I don’t like having a hotch-potch of these all in the same folder, I like to keep the filters in separate folders, but I don’t want to have copies of the same javascript files in every folder hence the ‘../’ which means "the parent folder’.

jonray · July 19, 2019, 3:44pm

Thanks @elusien , I got somewhere - the animation is working in chrome - but not responding when I apply to a colour clip in SC. Is this generated code OK? It’s from your example.

elusien test 01 changed 03.zip (981 Bytes)

Elusien · July 19, 2019, 4:27pm

Just compared yours to mine and apart from a break in the animation line (which makes no difference) and the location of the two javascript files it’s identical.I ran it in the browser and in Shotcut and it works fine in both.

I will change the utility to try the parent directory first and if the javascript files are not there it will use the current directory.

How long is your color clip. The animation only starts visibly aftey 3 seconds. Try a longer clip. Is there any error message in the logfile?

jonray · July 19, 2019, 4:41pm

A development - it works now! Thank you.Yes, I got it working just before your message. Yes, I needed to extend the colour clip!! Sorry to not think of that before - DOHH! (may be worth mentioning this in your instructions though in case others are as dense as me!!)

So it now looks like this when played in SC:

https://streamable.com/r2550

Great! I can think of so many possibilities now. What a useful addition to SC’s capabilities. Superb work!!

Now, just thinking - how do I change the position of the animation? For instance, centering the animation in the SC full screen? I presume I can change the left, top attributes in the code? I’l have a try.

Thanks for this @elusien. Great work.

Elusien · July 19, 2019, 6:12pm

I’ll change the example to have a 0.5s delay instead.

I would change the keyframes to be percentages centred around the middle (50%, 50%), e.g.
20% and 80%.

I have an interesting filter using this tool that is similar to “chasing borders” you did a while ago. I’ll put up some examples for people to see.

jonray · July 19, 2019, 6:16pm

Hi @elusien,
OK, thanks.
Also:
I had a spare hour so I thought I’d aim high and try to convert this rather complex animation to use in SC:

https://codepen.io/augs0/pen/RXNgEB

I made this original HTML file from the code (which works in Chrome):
HTML Codepen import 01 COMPLEX SHAPES original.zip (1.3 KB)

and this is my changed HTML after converting the keyframes/animations with your system:

HTML Codepen import 01 COMPLEX SHAPES changed 01.zip (1.9 KB)

However, the changed file doesn’t work in Chrome. I wondered if you could maybe have a look and see if you can find what I did wrong? Thanks!

jonray · July 19, 2019, 6:19pm

Interesting!

Elusien · July 19, 2019, 7:19pm

Okay there are a couple of problems.

Because the system uses Javascript to do the animation as opposed to CSS, You can’t have a name with a minus-sign in it, so I changed all the minuses to underscores (octagon_sparkle, triangle_sparkle, octagon_shards, triangle_shards). That got it (almost) working in Chrome.
The keyframes that have two percentages on them have the second one ignored. That is a problem in my code that I need to fix. This doesn’t stop it working though, only it isn’t quite right.
I feed this into Shotcut and again there are now another couple of things that are not quite right, basically the angle the “sparkles” shoot out. That is because of the old version of the webkit HTML engine that Shotcut uses. We have to change the “transform:rotate” that are NOT in the keyframes into “-webkit-transform:rotate”. We do not need to change it in the keyframes because the javascript handling those knows that this webkit HTML engine has to have the ‘-webkit-’ prefix.

After making all these changes it (almost) works in Shotcut. I then added the second percentages separately an it works fine.

Here is the final version:

Fixed.zip (2.0 KB)

jonray · July 19, 2019, 7:54pm

Hi @elusien, that’s absolutely fantastic, thank you. I’ll have a look at it when I next get a bit of time.