jackkemm Posted January 7, 2022 Share Posted January 7, 2022 (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, 2022 by jackkemm Updated title Link to comment Share on other sites More sharing options...
Solution Cassie Posted January 7, 2022 Solution Share Posted January 7, 2022 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...
jackkemm Posted January 7, 2022 Author Share Posted January 7, 2022 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