HTML/CSS3 Animations now possible in Shotcut

[samth]

Awesome work, Elusien! I just tried rotating a picture and this time there was no deviation; as you promised . And it worked right the first time. Usually, anything even resembling code means for me several trials are necessary to get to a result.

One remark about the webpage: If you only enter “{animation: myfirst 5s linear 2s infinite alternate; }” and not “div {animation: myfirst 5s linear 2s infinite alternate; }”, an error message is displayed which complains about a missing “}”. But actually, a name is missing not a curly bracket.
I was confused at first that it is not necessary to delete the @keyframes section because I would delete it to not cause any conflicts. But it seems this is not the case or you prevent that.
I will try it out some more later. My interim conclusion is positive .

[Elusien]

Yes, I have to tighten up on “errors”. I was more concerned with getting the utility out there, available for people to try. I will now try to make it less error-prone, or at least report errors (correctly).

The @keyframes section does not need to be deleted - it isn’t a problem if you do, because without the “animations” section (which you must delete or comment out) the @keyframes section is not used.

[jonray]

Hi @elusien, unfortunately I had no time to experiment today, but uncannily I had very similar teething “problems” as @samth on the first use yesterday. First, I put just only the line

    animation: myfirst 5s linear 2s infinite alternate;

into the fiield, took me a while to realise I had to split

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

into

 div {    animation: myfirst 5s linear 2s infinite alternate;  }

and

div {  width: 100px; height: 100px; background-color: red; position: relative;  }

Yes, you explain it in words (by saying
“If the animations data is part of a larger CSS clause, break that clause into two, with the animation data separate”,
but I wonder if an example might help the first-time user.

Also, I was unsure whether to include “@keyframes” or not when entering into the generator field. I think this could also be made a little clearer. Hope you don’t mind me pointing out these observations.

Looking forward to more testing…

[Elusien]

@jonray

Hope you don’t mind me pointing out these observations.

No of course not. I’ll be working on the code and the webpage over the next few days to see where improvements and extra checks can be made. I’m joping I can do them all at the webpage level and don’t have to create a new version of the javascript you have to download.

EDIT: I have already updated the webpage to highlight some of the issues that have already been experienced.

[jonray]

@Elusien

I have already updated the webpage

The updated instructions are spot on. I’m trying to find time to test out another animation but had to do some major gardening today

I made progress in a few refreshment breaks I took and will post my results whenever I can complete testing.

In the meantime I found 2 minor typos on your webpage:

1. Missing quotation mark from the phrase “partial kefyframes” (end of that paragraph).

2. Paragrah just below the instructions: it says “You do can delete the keyframes data…”

Will post asap.

[Elusien]

Fixed the 2 typos.

Fixed the problem with specifying 2 percentages on a keyframe e.g.

 @keyframes horizontal {
      0%      {transform: translateX(  0 );}
     40%, 60% {transform: translateX( 50%);}
    100%      {transform: translateX(100%);}
 }

Changed the error message if there is a mistake in the animations clause (e.g. missing off the element to which the animation applies.

Added an error message if the keyframes clause does not start with the string “@keyframes”.

[jonray]

Excellent! I thought you might be watching the Open golf today…

[jonray]

Hi @elusien, success!
I saw this on codepen, by Mark Bowley:
https://codepen.io/Mark_Bowley/pen/mEtqj

… and got this in shotcut:
BUBBLES!!

https://streamable.com/57xj3

Here’s my zip:
bubbles animation jonray.zip (55.2 KB)
The zip contains my 3 HTML files - #1 after copying/pasting the raw HTML and CSS, #2 after formatting/deleting/tidying up the code, and #3 after converting using your generator.

In #2 I did quite a bit of tweaking - some of it based on my knowledge of HTML.
I found LOTS of duplicated code to delete!
For example, I deleted the duplicated lines of keyframes and animation with -moz- and -webkit- prefixes (also gradient and box-shadow);
I also deleted the unnecessary code relating to text (1st CSS clause) , changed body-wrap to body_wrap, and gave it a dimension of 1920 x 1080.
Then changed x1, x2 etc to bubble01 bubble02 etc (just so I could understand how it works).
Then I added “0s” for the delay part of the animation.
Finally I struggled with understanding the pseudo element :after, (didn’t know how to convert this to divs) - just about to ask you for advice, then I found if I just deleted this part it still worked OK!

(Oh, and I added a few more bubbles!!)

One point I noticed is that your system worked OK with having “double animations” for each element (one vertical and one sideways).

So, I’m pleased to report that it works OK. It was quite a complex animation but it would have still worked had I not tweaked it (deleted/changed names etc) quite as severely.

Great, well done @elusien!! - will try to find another animation to explore with soon and report back.

[jonray]

Hi @elusien, me again, with a question.

Would your system allow users to convert HTML which includes JS code? I found this on codepen:
https://codepen.io/rachsmith/pen/oGEMbz

… and wondered if I could convert it. Before spend time trying it, I thought I’d ask if it would work in principle since it has JS code as well as HTML and CSS. Thanks!

[EDIT: I just spent a minute copying and pasting the HTML CSS and JS to get this:
START TYPING animation 01 with pasted code (raw).zip (2.7 KB)

… but it won’t work in Chrome.]

[Elusien]

Been out all day and just got back from the airport with the next lot of family coming to stay.

Strictly speaking the code is not javascript it is written in babel and needs to be fed through the babel compiler to produce javascript. None of the animation is done using CSS, so even if you got the javascript sorted you’d still have to find a way to synchronise the animation produced by the javascript with WebVfx.

It’s not that it can’t be done, just that it isn’t simple. If I get a few days spare I wouldn’t mind looking at it and trying to get it working in Shotcut. But if I were you I think I’d leave it on the shelf, unless you are proficient in javascript programming.

By the way, well done in getting the bubbles to rise. It did seem a bit fiddly.

[jonray]

Ah, thanks for the explanation. Your detailed knowledge of all this never ceases to amaze me - so thank you! Yes, I will leave it to you, if you get any spare time. I certainly don’t have the necessary JS programming skills - in fact, I’d rate it as zero!

@Elusien

By the way, well done in getting the bubbles to rise. It did seem a bit fiddly.

Yes, it was a bit fiddly but mainly because I wanted to analyse what was going on in the code. I’ll look for a simpler animation to try next - or at least one that has more standard straightforward coding.

[samth]

So I got time to really test the new system instead of just using it for a previous written animation.
I used this example of an animated bird: https://codepen.io/matchboxhero/pen/XeQWNw
After tidying it up to comply to the generator’s requirements, I copied the generated code back into the file. Opening it in the browser works but in Shotcut there is only a still frame.
In the log it says:

[Info ] SyntaxError: Unexpected token ‘-’
[Info ] TypeError: undefined is not an object (evaluating ‘this.animate.length’)

I do not know when I should have defined a length. The browser console displays this undefined length as well but plays the animation regardless.
The unexpected token seems to be a minus but removing it from the background-position property did not yield any result (unsurprisingly).
I compared my code with jonray’s bubble code but did not find anything vastly different except that in mine a svg is used. Additionally, there was no undefined length error.
Here the files: bird.zip (5.0 KB)

[jonray]

Hi @samth, I think I know one problem - try changing bird-container and fly-cycle to bird_container and fly_cycle. Leave the other minus signs. I’ve no time to test to see if that works right now but it might help. Not sure about the other problem, I guess @elusien’s your man…

[jonray]

One more thought - I’ve never heard of a “will-change” attribute. Maybe it’s something to do with that?

[jonray]

Also, try replacing

animation-name: 
fly_cycle;
animation-duration: 1s;
animation-timing-function: steps(10);
animation-delay: -0.5s;
animation-iteration-count: infinite;

with

animation: fly_cycle 1s steps(10) 0s infinite

and see if that works in Shotcut. Works in Chrome …

[samth]

I feel a bit dumbfounded. I overlooked the minus signs in the names . They were definitely preventing the animation. It works now to some degree but there is tweaking necessary. I will report my progress later.

I did format the animation part because I pasted it in the generator before without any formatting and there were several errors.

The will-change property is not necessary as it seems only relevant for some browsers. Removing it does not impact it in Vivaldi.

[Elusien]

@jonray

I’ve never heard of a “will-change” attribute.

It is a hint to the browser of what is going to be changed in the animation so it can optimise its work. See: will-change | CSS-Tricks - CSS-Tricks

Yes, you are right. You have to convert the “animation-” properties into the combined shorthand “animation:” property.

When I have time I will modify the utility to allow hyphens (-) in the names. At the moment they are not detected by the utility and cause a problem at run-time, which is more difficult to notice.

I’m still in the throws of setting up my new Surface Pro, so I can’t do as much as I could otherwise.

[jonray]

@samth

I feel a bit dumbfounded. I overlooked the minus signs in the names

No worries, I’m always missing out the obvious!! Easy to do…

@samth and @elusien, I amended the bird HTML and applied it to a blue colour clip in SC and got this:

https://streamable.com/n647j

To my untrained brain it’s as if the easing value “step(10)” doesn’t work?
Works fine in Chrome.

The HTML file I used:
bird samth amended 01.zip (1.1 KB)

[jonray]

Now it’s getting FUN!

I took this animation:
https://codepen.io/yemon/pen/pWoROm

Converted it, edited the text, applied in SC and got this:

https://streamable.com/n0t62

HTML files - #1 before conversion,
#2 after conversion:

02 text AWESOME test 2 HTML files.zip (2.3 KB)

I discovered that you can download a zip file of the code from Codepen if you sign in. In the downloaded folder called “dist” the file “index.html” is the code converted to a working HTML file which should preview in your browser. No need to copy/paste.

I’m off to find a few more animations…

[samth]

That is my problem as well. I was not able to figure a workaround and you were not as well, as it seems. I think too that this step(10) is the culprit. It should flip through the 10 birds of the svg similar to a flip-book. Perhaps a modification of the scripts is necessary .

Nice animation! Did it work right away after editing to meet the generator’s requirements?

@jonray

download a zip file of the code from Codepen if you sign in

I might sign up for Codepen. It is simple to copy the code but downloading a html file is just easier.