Simple: Timed fade in, scrolltrigger fade out

[Coopski]

Hi, 

 

Very new to this. Sorry about what is probably an embarrassingly easy question. 

I am trying to get a div to fade in on a timer then fade out on a scroll. 

The fade in works, but the fade out doesn't scrub, it just disappears.

Can anyone help?

 

Many thanks

T

See the Pen xxOzBdG by interrogo (@interrogo) on CodePen

[ZachSaucier]

Hey Coopski and welcome to the GreenSock forums.

 

You're making one of the most common ScrollTrigger mistakes: nesting ScrollTrigger in tweens within a timeline. Doing so doesn't make much sense because the timeline and the ScrollTrigger try to control the animation. 

 

Once you fix that, you still have a logical error though: since your ScrollTrigger start point is before the initial scroll position, both your start animation and your ScrollTrigger are trying to set the value at the same time so one will overwrite the other. You probably want to wait to create the ScrollTrigger until after the load animation has finished. To prevent the jump in state caused by the initial scroll position affecting the ScrollTrigger, you could use a numerical scrub. Something like this:

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

[Coopski]

Ah, yes. That makes sense now. Thank you so much for getting back to me, that's brilliant.