Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dnknapp

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.

 

Thanks!

Dan

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

Link to post
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 post
Share on other sites

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

Link to post
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 post
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 post
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.

×