McSteer Posted February 5, 2022 Share Posted February 5, 2022 Hello! I'd like to make this horizontal scrolling animation, to not be so "analog". Meaning I'd only want it to switch at certain scroll positions, until then it should just stay on the current slide. Thank you! See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted February 5, 2022 Share Posted February 5, 2022 You'd need to add logic so that a function gets fired at the right spots that then animates the playhead accordingly. You could add those to a timeline with equal spacing, for example, and then when the scrub goes past each of those spots, it animates things accordingly. Link to comment Share on other sites More sharing options...
McSteer Posted February 8, 2022 Author Share Posted February 8, 2022 Thank you for your reply @GreenSock ! I decided, to try and make what I want from scratch, i whipped up a little demo, which might not be the most optimal way to solve the problem, but it kinda works, but I also got into another problem. I don't know if this is even on topic, if not i'm sorry, but I'm trying to find out, how to continue an animation from existing "x", meaning that I'd like the slides to continue on to the green slide instead of restarting the animation from the red slide. See the Pen xxPRadG by thesbeve (@thesbeve) on CodePen Edit: should i use timeline? sorry i'm really new to GSAP Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 8, 2022 Solution Share Posted February 8, 2022 By default, animations with a ScrollTrigger attached will render immediately which locks in the start/end values but the way you built things makes that undesirable because you're using relative values and you're trying to animate the same thing and make things build upon the previous animation(s). So you should set immediateRender: false so that it waits until the very first time it gets triggered to lock in the start/end values. See the Pen podRVrO?editors=0010 by GreenSock (@GreenSock) on CodePen You could definitely use a timeline instead. There are many, many ways to approach this actually. Here's another more dynamic way: See the Pen dyZNeZM?editors=0010 by GreenSock (@GreenSock) on CodePen I hope that helps. Enjoy the tools! 1 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