Jump to content
GreenSock

friendlygiraffe

TextPlugin animating span tags

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×