TextPlugin animating span tags

[friendlygiraffe]

I know the TextPlugin is not supposed to support nested HTML tags, but I'm trying to tween the colours of a paragraph, which doesn't animate the styled word's letters individually.

 

Wondered if there was a way around this? 

 

Unfortunately, I am not allowed to use SplitText for this project, otherwise I would have.

 

Thanks

See the Pen YzGZree by friendlygiraffe (@friendlygiraffe) on CodePen.

[mikel]

Hey @friendlygiraffe,

 

The solution could be: step by step or words by words (?)

 

See the Pen RwGpjJX by mikeK (@mikeK) on CodePen.

 

Happy tickering ...

Mikel

 

[friendlygiraffe]

19 minutes ago, mikel said:

Hey @friendlygiraffe,

 

The solution could be: step by step or words by words (?)

 

 

 

 

Happy tickering ...

Mikel

 

 

Thanks, that's great. But it's a dynamic thing. So the text has to be in one div

I probably should have specified this originally!

 

Updated the codepen: 

See the Pen YzGZree by friendlygiraffe (@friendlygiraffe) on CodePen.

 

 

[ZachSaucier]

The concept is the same. You should still split the container (#Headline_Copy) by words and letters, loop through each word, and append the letter animations to a timeline like mikel shows.

[friendlygiraffe]

15 minutes ago, ZachSaucier said:

The concept is the same. You should still split the container (#Headline_Copy) by words and letters, loop through each word, and append the letter animations to a timeline like mikel shows.

 

Here's a new method which depends on the whole string being grouped into spans, i'm nearly there:

 

See the Pen qBaroKJ by friendlygiraffe (@friendlygiraffe) on CodePen.

 

The questions I have are: How can I make the timeline loop through the spans array and animate all the words at adjusted speeds? There is also a delay at the beginning. Thanks!

[ZachSaucier]

If you want to loop you need to use a loop  

See the Pen NWRpMWp?editors=0010 by GreenSock (@GreenSock) on CodePen.

[friendlygiraffe]

9 minutes ago, ZachSaucier said:

If you want to loop you need to use a loop  

 

 

 

 

Sure I will go down that route, I was just checking there wasn't a built-in method. GSAP usually tweens arrays automatically, but I realise this is more complex

 

Do you know how I can time the tweens of each word to match as if the sentence was being Tweened? Eg: the word IS would animate quicker than SOMETHING

 

By the way: I am not using SplitText for this

 

[ZachSaucier]

16 minutes ago, friendlygiraffe said:

Do you know how I can time the tweens of each word to match as if the sentence was being Tweened? Eg: the word IS would animate quicker than SOMETHING

My demo already does that as it's based on the number of characters in each word.

 

16 minutes ago, friendlygiraffe said:

I am not using SplitText for this

If you want to spend your time recreating and maintaining tools that GSAP already has, that's on you  Using SplitText makes this sort of thing easier so I used it. We believe that you'd find all of the Club GreenSock plugins to be huge time savers. Most of the time people find that a membership pays for itself in a matter of days. 

[friendlygiraffe]

2 minutes ago, ZachSaucier said:

My demo already does that as it's based on the number of characters in each word.

 

If you want to spend your time recreating and maintaining tools that GSAP already has, that's on you  Using SplitText makes this sort of thing easier so I used it. We believe that you'd find all of the Club GreenSock plugins to be huge time savers. Most of the time people find that a membership pays for itself in a matter of days. 

 

I'd love to use SplitText, but the ad server I'm developing for only like Google hosted JS, hence TextPlugin

 

[lahisir]

Similar problem. I created a css animation to fade in the new text range from black to red, but one of the problems I have is that it also fades in the existing red span text.

[ZachSaucier]

@lahisir Hello and welcome to the GreenSock forums. 

If you'd like help debugging your issue, please create a minimal demo of the issue and create a new thread