mrcl Posted March 30, 2022 Share Posted March 30, 2022 Hi, I can't figure out a problem I have using SplitText with ScrollTrigger. When scrolling down everything animates as planned and the text slides in smoothly but on re-entering the text disappears for a second to then being animated in reverse. It only seems to affect the text and since I do a double split I was wondering if this might be the reason and if there's a workaround. I wanted to emulate the problem best I can I tried to stick to the original dimensions of my project. Best is to open the codepen in a new window. Thanks in advance! Marcel See the Pen ExovjQZ by mrclstrtr (@mrclstrtr) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted March 30, 2022 Share Posted March 30, 2022 Hi Marcel, You're animating these classes in several places, which is going to ALL of those elements because it's doing document.querySelectorAll. .from(".wordsChild", { yPercent:100 },0) .from(".linesChild", { duration:1, yPercent:100, stagger:0.1 },0) You would need to get only the elements for that particular animation use something like myElement.querySelectorAll(".wordsChild") or get the words/lines from your SplitText instance, like mySplitText.words. 2 Link to comment Share on other sites More sharing options...
mrcl Posted April 4, 2022 Author Share Posted April 4, 2022 Thank you so much for pointing it out @OSUblake It's always the little things 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