Jump to content


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

Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.