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

Tutorial
21

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:

22

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)

23

Thank you very much!

24

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!

25

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
26

Thank you very much!

27

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

28

I extended elusiens webvfx with another ease effect that i really like for text animation.
Since Shotcut is no longer supporting this Text:HTML filter, what is the way to go when i want to re-use or maybe do my own text animation with a f(t) algorythm instead of keyframes?

29

Hi @smartintech - I’ve never heard of a f(t) algorythm but I’d love to know more!

(I just put it into Goole and got " Algorythm (Ft. Drowsy) by Banon Coone - SoundCloud" - LOL! :rofl:

1 Like
30

@jonray Mathematically the “f” refers to “function” add the “t” refers to time, so f(t) is an effect that is a function of time.

Keyframes are discreet instances of time, with some sort of interpolation between them.

So @smartintech is asking how to get an effect that varies according to a function of time, such as my “Explosion” or “Fragmentation” filters that use Webvfx., which really can’t be done with keyframes.

31

Ah, thanks @elusien, I should have thought of that - now my A-level Maths studies from 45 years ago is coming back to me!! :wink:

32

Yes, good explanation.
So currently there is no solution except using an old version of shotcut to render the HTML animation?

I’m thinking of modifying the .mlt project file to do those kind of tricks.
Then i could build other functions like speedramping by programatically segmenting the clip’s end into chunks with different playback speed.

33

@smartintech, @elusien started a brilliant thread on this: (It’s a bit long, the posts from number 32 onwards are especially useful). But yes, reverting to 20.07 is I think the best solution. It’s really easy to do.

2 Likes
34

Hi @jonray,
Let me get this right, in order to use your templates, I will need to

  1. Update any of the AT KEYFRAMES template with my own content
  2. Use elusien css generator to convert to use in shotcut, not forgetting to use the correct version of shotcut

OR

  1. Use any of the template in folder 3 (CONVERTED for Shotcut - TRANSPARENT background) with my own content, and then use the correct version of shotcut to get the desired effect?

Just a bit confused which way to go tbh.

Thanks

Ed

1 Like
35

Hi @odusis, method is:

  1. Use any of the template in folder 3 (CONVERTED for Shotcut - TRANSPARENT background) with my own content, and then use the correct version of shotcut to get the desired effect

Thanks for your interest in this and sorry for any confusion! J

1 Like
36

@jonray Thanks for the reply.

Final question i promise, when will i ever need to do this?

Update any of the AT KEYFRAMES template with my own content
Use elusien css generator to convert to use in shotcut, not forgetting to use the correct version of shotcut

Is it only if I want to adjust the animation speed/duration if I am not happy with your template defaults. Thanks.

37

@odusis, no problem, always ask!! Yes, that’s exactly what I meant. Alternatively you could change the converted code but personally I think it’s easier to change the AT keyframes code, then convert. This is because the converted code is to my mind harder (mainly because I’m not an expert in JavaScript and I understand the “at keyframes” way of animating. Hope this helps.

1 Like
38

Thanks @jonray is there an easy way to have like a X line with up Y words in it? or does that require coding, and is it something i will have to dig into your template to get whatever X lines and Y words i need?

39

Hi @odusis, not entirely sure what you mean Do you mean like a column of words? In which case, yes I think you would have to re-code.

1 Like
40

yes that’s what i mean. Ok, thanks.