Jump to content


Animate in on page load + animate out on scroll

Recommended Posts

Hi everyone!  Thanks for making such an awesome library, it's really a joy to use.


I've gotten stuck on what seems like a common use-case, but haven't been able to find any hints on how to make it work. I'd like an animation to run when the page loads, and then scrub through another animation on the same elements with ScrollTrigger. Is this possible? In the codepen, I'd like the red square to fade in automatically, and then fade out again while scrolling.




See the Pen NWNJqbr by dnknapp (@dnknapp) on CodePen

Link to comment
Share on other sites

You could do several things:


I might use an onComplete like this. However one other thing you need to consider is what happens if you scroll during the intitial animation, you would probably also want to be preventing window scroll during this time as well. Note: with the scroll disable on the window you don't have to wait to init the scrollTrigger timeline in the function but I showed it that way so you can see how it waits for the onComplete before the markers appear.


See the Pen JjXzGQL by Visual-Q (@Visual-Q) on CodePen


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

Awesome, thanks so much! It would have never occurred to me to use onComplete like that!

Link to comment
Share on other sites

Hey dnknapp and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!


You're making one of the most common ScrollTrigger mistakes: .to() tweens with ScrollTriggers get evaluated immediately so you need to set immediateRender: false if you don't want that to happen. In this case you should also set overwrite: 'auto' to make sure the old tween is killed when the ScrollTrigger is reached. But this helped us find a bug in the current version that made it glitch even if you did that. We fixed the bug and you can see the working version below (you may need to clear your cache):

See the Pen 5ee69c59eea050ee5b3efcf75313bf5e by GreenSock (@GreenSock) on CodePen


Visual-Q's method also works :) 

  • Like 2
Link to comment
Share on other sites

Thanks, Zach. That makes sense and should make things a little simpler. Glad my clumsiness could help make GSAP even better 😀

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

I don't know if you noticed but if you scroll before the first animation is finished, it takes the current CSS styles and applies them as to original styles to use with the scrolltrigger, so if you scroll before it's opacity: 1, then that is the value which is used when you scroll all the way back up. Do you recommend stopping users from scrolling until the first animation is finished and then letting people scroll afterwards in order to have the values all set? I was testing using fromTo on the scrolltrigger but that wasn't working. Let me know your recommendations please. Thanks!

Link to comment
Share on other sites

Hi uptopian,


It's best to create a new thread with a minimal demo showing your issue, but maybe this thread will clear some stuff up.



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.