Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Rinku Samanta

Leave animation not triggering when scrolled fast.

Go to solution Solved by GreenSock,

Recommended Posts

Hello folks, I am trying to do a simple scroll animation where one div leaves and other div enter on scroll. The animation somewhat works when scrolled slowly but when scrolled very fast, the leave and leaveback animation do not trigger sometime. I can see the console log for the onLeave() and onLeaveBack() hooks of scrolltrigger but the animation do not trigger.

I am stuck on what cause this bug so any help regarding this would really be appreciated.

See the Pen NWRwjNr by rinkusam12 (@rinkusam12) on CodePen

Link to comment
Share on other sites

  • Solution

It's just a logic issue in your code - you're creating conflicting tweens that are fighting to control the same properties of the same object simultaneously. Your "out" tweens are only 0.3 seconds long, but your "in" tweens are 1 second long, thus think about what would happen if someone scrolls quickly. The "in" tween starts fading the element in, and then perhaps 0.1 seconds later you create ANOTHER tween that's fading the element out. So both tweens are running at the same time, fighting each other but the last one "wins". Then, when the fade-out finishes in this case, the fade-in still has 0.6 seconds left!! Thus it continues and you see the element finish fading in. 


GSAP is doing what it's supposed to do. All you'd need to do to fix this is set overwrite: true on your tweens (or you could do overwrite: "auto" but I think in this case it's cleaner/faster to just do true). 

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


Side note: there's no reason to set scrub: true on your ScrollTrigger because that only applies if you actually have the ScrollTrigger controlling an animation. In your case, you don't. It's not hurting anything, but it's just unnecessary to have there. 


Happy tweening!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hey thanks Jack for point out my mistake, I am relatively new to GSAP and animation stuffs so don't know all the properties in much details. Your solution and advice are really helpful. Thanks again...:)

  • 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.