SplitText Freeze on Sticky

[MarcoCuel]

Hello everyone,

I'm encountering an issue with the SplitText library. When I apply SplitText to elements with position sticky or use the pin feature of ScrollTrigger, the animation freezes and only resumes upon returning. I believe this may be related to toggleActions, but I'm not sure how to resolve it properly.

 

Has anyone encountered this problem before or have any suggestions on how I can effectively work around it?

 

I appreciate any help or suggestions in advance.

 

Thank you, Marco

 

See the Pen YzMNGoG by MarcoCuel (@MarcoCuel) on CodePen

[Rodrigo]

Hi,

 

That is indeed what's supposed to happen actually based on the toggleActions you have set up:

toggleActions: "play pause resume reset",

That basically tells ScrollTrigger to play the animation onEnter, pause the animation onLeave, resume the animation onEnterBack and reset onLeaveBack, from the ScrollTrigger docs:

 

toggleActions
String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

onEnter
Function - A callback for when the scroll position moves forward past the "start" (typically when the trigger is scrolled into view).

onLeave
Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). 

onEnterBack
Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view).

onLeaveBack
Function - A callback for when the scroll position moves backward past the "start" (typically when the trigger is scrolled all the way backward past the start).

 

Based on that and what you're trying to achieve, you should configure your toggle actions accordingly.

Hopefully this helps.

Happy Tweening!