Share Posted January 7 (edited) 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 type-transition_Je0JyRCL.mp4 See the Pen Exwpwee by jackkemm (@jackkemm) on CodePen Edited January 7 by jackkemm Updated title Link to comment Share on other sites More sharing options...
Solution Solution Share Posted January 7 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted January 7 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now