How to start opacity immediately when user scrolls down to the next section?

[Laurence]

How do I start my animation  opacity from o to 1 immediately when user is scrolling down to the next section? Here in this code. The animation is using percentage of the opacity. 

 

Would like to achieve a behavior wherein when a user is scrolling at the end of the pinned section. It will Fadeoutthe previous section and then Fadein the next section.

 

Is this achievable? If so, what's the best option to modify the code I've given? 

 

Sorry, quite new to GSAP plugin and still learning the functionalities.

See the Pen bGxNbza by laurence-albano (@laurence-albano) on CodePen

[Cassie]

Hey there!

 

Maybe onEnter and onLeave are what you're looking for? 

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

You've got a little conflicting logic in your pen currently - each loop is targeting that section and the previous one with conflicting tweens that occur at the same positions.

Markers sometimes help to figure out what's going on.