dnknapp Posted September 25, 2020 Share Posted September 25, 2020 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 comment Share on other sites More sharing options...
Visual-Q Posted September 25, 2020 Share Posted September 25, 2020 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 3 1 Link to comment Share on other sites More sharing options...
dnknapp Posted September 25, 2020 Author Share Posted September 25, 2020 Awesome, thanks so much! It would have never occurred to me to use onComplete like that! Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 25, 2020 Share Posted September 25, 2020 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 2 Link to comment Share on other sites More sharing options...
dnknapp Posted September 28, 2020 Author Share Posted September 28, 2020 Thanks, Zach. That makes sense and should make things a little simpler. Glad my clumsiness could help make GSAP even better 😀 1 Link to comment Share on other sites More sharing options...
utopian Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
OSUblake Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now