scrolltrigger Two scrolltriggers --> wrong element state at beginning

[matruck]

Hello and thank you for your amazing work

 

I have to animate an element with scrollTriggers.

The entrance animation (when the element enters the viewport from the bottom) is not scrubbed, but the leaving animation (when the element leaves the viewport by the top) is scrubbed.

 

On the demo I provided, you can see that the red square is visible at the beginning, but I want it to be at opacity = 0. Once you scroll to the starting point and go back, the square successfully disappear and everything is as I want it to be even if you scroll up and down.

Why is it visible at the begining and how to fix it  ?

 

Thank you  

See the Pen OJGMaLW by Matthieu-David-the-flexboxer (@Matthieu-David-the-flexboxer) on CodePen

[GreenSock]

By default, scrubbed animations will render immediately. So in this case, it's getting that animation ready by putting it in its starting state which has the element at full opacity. You can force it to not render immediately by setting immediateRender: false on your ScrollTrigger: 

See the Pen qBwbgRM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also, you can greatly simplify a lot of that code. All you need is two tweens each with a ScrollTrigger. And by the way, there are convenience methods directly on timelines to simplify this: 

// long
tlOut.add(gsap.fromTo('.elt', { opacity: 1 }, { opacity: 0 }))

// shorter
tlOut.fromTo('.elt', { opacity: 1 }, { opacity: 0 })

 

I hope that helps. 

[matruck]

Thank you !!

 

And also for pointing out the overcomplicated code !

[GreenSock]

Just so you can see what I meant, here's the much more simplified code: 

See the Pen xxeVxzb?editors=0010 by GreenSock (@GreenSock) on CodePen