Animation on leave - scrolltrigger & locomotive

[kobracode]

Hello there,
I need a help, i am trying to understand how i can do different animations with scrolltrigger & locomotive when a section enters a view port , and a different on exit.

For example here, i need the hero section starts autoAlpha: 0 when is leaving the view port, but i am not really sure the timestamp on the timeline, whats the position parameter to use.

See the Pen bGwjwXo by skigo (@skigo) on CodePen

[akapowl]

Hey @kobracode

 

That depends on how and when exactly you want it to happen.

 

For your example, you could set the start to "bottom bottom" (and remove the "2" in the position parameter of your timeline and likely also the duration).

Then it would start fading out when the bottom of that section hits the bottom of the window.

 

For fading a section in like that (with a scrub applied) you could use a similar concept.

You'd have to set it to opacity: 0 and visibility hidden beforehand, and you could use a ScrollTrigger with start set to "top bottom" for example - so when the top of the section hits the bottom of the window it will start fading in.

 

See the Pen cdf9f817b56015e79f5677d8bfcd8941 by akapowl (@akapowl) on CodePen

 

 

I would highly recommend reading through the docs, because they explain how to get you started with the basics very well.

 

For this example, point 4 - start and end - in the video up on top of the docs will be particularly helpful for you to get a better understanding.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger