"WordFlash" text effect, done with the Text:HTML filter

OK, @kinuris, downloaded. I’ll have a look. I’m busy for this evening so it won’t be immediately though. In the meantime if @elusien is around, I’m sure he can tell you what’s amiss :smiley:

I had a very quick look and found the problem!! Here is your file repaired.

There were lots of “Opacity:1” entries in the divs at the bottom of your code. I’ve just added hashes to get rid of them! Now the opacity is controlled by the keyframe data only.

pag1 repaired.html.txt (30.9 KB)

Thank you very much!

I’d like to better understand how the code works. The question is where do you change the durations, and what does it mean the values:

in lines like this:

{elements: "#line2_6", animations: [{keyname:"move01", timings: {duration:3000, easing:"linear", delay:2600, iterations:1, direction:"normal", fill:"forwards"}}, {keyname:"exitUP", timings: {duration:3000, easing:"linear", delay:11800, iterations:1, direction:"normal", fill:"forwards"}}]},

and/or lines like this

#line2_4 {animation:move01 3s linear 2.2s 1 normal forwards, exitUP 3s linear 11.0s 1 normal forwards;}

Thank you!

Sure. In the top example code (after being converted using @elusien’s HTML animation generator), timings are in milliseconds, so 3000 is 3 seconds.

SO… the animation of Line2_6 (line 2, word 6) lasts for 3 seconds, but it’s delayed (not shown until) 2.6 seconds. Then the “exit” animation has a duration of 3 seconds, but it doesn’t start until 11.8 seconds.

The 2nd code is similar, but is a way of writing the code using what I call the “@keyframes” method. @elusien will be able to give the correct terminology for these types of code.

In the second example (unconverted), timings are in seconds, so “3s” means “3 seconds”.

So, the animation of Line2_4 (line 2, word 4) lasts for 3 seconds, but it’s delayed (not shown until) 2.2 seconds. Then the “exit” animation has a duration of 3 seconds, but it doesn’t start until 11.0 seconds.
After conversion, ignore the lower code - as I understand it, the top code supercedes the lower code. @elusien will correct me if I’m wrong, and maybe add other points. He’s the coding genius, I’m his pupil… :smiley:

Changing the duration of an animation to a shorter timespan will make it run faster, and vice versa…

1 Like

Thank you very much!

Cor! I wouldn’t mind seeing the video when this is done. :open_mouth: