Jump to content
GreenSock

jackkemm

Staggered words SplitText in chunks of text, one after the other

Go to solution Solved by Cassie,

Recommended Posts

Hi there,

 

I am trying to get an animation to work but struggling to get the timeline correct.

 

I will be using SplitText to stagger words where a sentence is chunked up. So the first chunk would animate in word by word, then a slight delay, then the second chunk, and so on.

 

I am able to animate each chunks opacity (this is just to know I can animate each section separately), but when trying to animate the SplitText i'm not sure how to get this to work.

 

I have an Codepen attached and an example video of what i'm after.

 

The second issue I'm finding is that SplitText breaks the chunks of text due to them being divs. I know it's for allowing overflow animations but wondering if there's a way to fix the lines breaking?

 

Thanks in advance.

 

Jack

See the Pen Exwpwee by jackkemm (@jackkemm) on CodePen

Edited by jackkemm
Updated title
Link to comment
Share on other sites

  • jackkemm changed the title to Staggered words SplitText in chunks of text, one after the other
  • Solution

Heya! Sure thing.

So firstly you'll want to use display:inline to keep your text... well... 'inline'

Secondly you'll want to loop around your chunks and add a staggered tween to the timeline for each one.

 

Here you go...

See the Pen VwMBQpg?editors=1111 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Cassie strikes again!

 

Thank you so much. I was kind of along the right lines 🤦‍♂️

 

To overcome the inline/overflow not working issue I just used a clip-path to hide the text, works like a charm!

 

Thanks again.

 

Jack

  • Like 1
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.
×