ScrollTrigger + SplitText + strange behaviour

[mrcl]

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

[OSUblake]

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.

[mrcl]

Thank you so much for pointing it out @OSUblake It's always the little things