JonQuayle Posted April 21, 2022 Share Posted April 21, 2022 Hey, I'm trying to animate multiple text elements on a page using ScrollTrigger and the SplitType library (https://github.com/lukePeavey/SplitType). I have got it work when animating the full text block itself (so I know the scroll trigger part is working), but I want to animate and stagger in the individual characters in a fluid motion - I have this working for the hero sections of the website on page load, but am stuck when looping through all the text elements on a page and targeting the text characters within the forEach() loop. The initial load works, but every element after that either isn't appearing at all, or is appearing but in the final animated state. I've tried assigning variables to the element.chars that is specified in the SplitType library to insert into the gsap.from tween but still not luck. I feel I am close but missing that last 10%... any ideas where I am going wrong? Simple codpen here - Thanks See the Pen abEMKXX by JonQuayle (@JonQuayle) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted April 21, 2022 Solution Share Posted April 21, 2022 Heya, just a scoping issue pal. You need to just target the characters within that heading. Right now you're animating all of them when the first heading hits the trigger point. See the Pen rNpRZYM?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
PointC Posted April 21, 2022 Share Posted April 21, 2022 BTW 3 Link to comment Share on other sites More sharing options...
JonQuayle Posted April 21, 2022 Author Share Posted April 21, 2022 I see where I was going wrong, thanks @Cassie. That is making sense to me now . 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