Staggered opacity change on scroll both directions

[tin_soldier]

Can someone tell me whether they can spot why the first line in my SplitText header disappears immediately on the outro animation, instead of being part of the stagger?

It works when they go from 0 to 1 opacity but not the other way around. To be clear, it's the 2 words 'Lorem Ipsum' that I'm talking about.

See the Pen NPrNXYZ by 1976ltd (@1976ltd) on CodePen.

[mvaneijgen]

It is hard to say what exactly is causing the issues due to the many ScrollTrigger on the page and you have two tween/ScrollTrigger that target the same element, which is causing conflicts. 

 

As a test I've given all your ScrollTrigger markers and IDs so that we can see which one is doing what and as soon as lines-opacity-0 starts the text disappears. 

 

I'm not completely sure what it is you're trying to do, but if I where you I would make a timeline with one ScrollTrigger and have the text animate in and out in the same timeline, this way you have no conflicts. 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and take a look at the most common mistakes https://gsap.com/resources/mistakes/

 

Did you know there are .from() tween which are most of the time much easier to setup. Something will then just animate .from() your specified value to the browsers default, no need for .set(). 

 

Also note that ScrollTrigger can have only scrub: true or toggleActions set, not both 

 

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

 

 

Here a setup how I would set it up 

 

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

 

Hope it helps and happy tweening! 

[tin_soldier]

Thanks @mvaneijgen. Doing it with one timeline was what I was missing. I was thinking I needed multiple trigger points but for what I want to achieve this will work. Cheers.