lvekua Posted September 14, 2022 Share Posted September 14, 2022 Hi Guys, I'm new to Gsap and this is my first post. I Was basically trying to figure out how to setup an animation similar to step progress. I've been looking through the docs and couldn't find the answer that could solve my problem. Basically what I'm trying to achieve is to make each path step become active as the truck intersects it and then be able to recycle the whole animation every time the section is in viewport view. I could only get this far where path steps turn active but all at the same time I'd really appreciate if you could help out with this issue. Thanks in advance. See the Pen QWrGBWZ by lvekua (@lvekua) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 14, 2022 Share Posted September 14, 2022 Hi there! The best thing to do to start with is get your animation right without using scrollTrigger. Timelines are the key to creating sequenced animations. Here's an example using a timeline and staggers. See the Pen eYrBxNr by GreenSock (@GreenSock) on CodePen Then when you're happy you can add a ScrollTrigger to that timeline. ✨ 2 Link to comment Share on other sites More sharing options...
lvekua Posted September 15, 2022 Author Share Posted September 15, 2022 Thank you so much for your reply @Cassie This really helped a lot and took it very close to what I would like to achieve. I have added the scrollTrigger to the code you provided and pretty much works as expected, however I was unable to pass the toggleClass "active", neither to timeline or scrolltrigger. For example instead of changing the background color on each step backgroundColor: "#fa8072", how could I set the class on each item as active? Here is an updated demo with scrollTrigger: Thanks again! 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted September 15, 2022 Solution Share Posted September 15, 2022 Nicely done! You can use a callback to add a class ☺️ See the Pen yLjgMPa?editors=0110 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
lvekua Posted September 15, 2022 Author Share Posted September 15, 2022 You are a genius! Thank you so much! this is exactly what I was aiming for. ❤ 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