Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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.
×