First text not displayed when scrolling back in split text animation

[piastri]

Hi,

I need some help with a split-text animation. I’m animating split text on scroll with staggered effects. The animation works as expected when scrolling down, but when scrolling back up, the first letter (or word) does not appear.

I would like to understand why this is happening.

 

Thank you.

See the Pen LEZPJrp by anandubabucj7 (@anandubabucj7) on CodePen.

[mvaneijgen]

Hi @piastri welcome to the forum!

 

Your issue is that you have two separate tweens that tween the same element and the same properties, these two tweens have no idea of each other and what they are doing. That is where timelines come in, this way the tweens know of each other and don't create conflicts. 

 

I would also not create separate ScrollTrigger for in and out animations. You already had setup your toggleActions, but you were not using them. When you create a forward animation you already also create the backwards animation, eg this is just playing the tween backwards. General tip always enable markers when working with ScrollTrigger, so that you can see what is happing under the hood and in this cause I've also given your ScrollTrigger custom id's so that you can see what is doing what 

 

Personally I would not use position: sticky when working with ScrollTrigger it is best to have ScrollTrigger handle all the pinning by using pin: true, but you would then need to use a separate ScrollTrigger and for now it seems to work, but know position: sticky can cause issue with ScrollTrigger.

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ 

 

Hope it helps and happy tweening! 

 

See the Pen wBWwQVg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[piastri]

1 hour ago, piastri said:

Hi,

I need some help with a split-text animation. I’m animating split text on scroll with staggered effects. The animation works as expected when scrolling down, but when scrolling back up, the first letter (or word) does not appear.

I would like to understand why this is happening.

 

Thank you.

Thank you very much for the detailed explanation @mvaneijgen. I am working with the starter guide and timeline.