Jump to content
GreenSock

lvekua

ScrollTriger toggleClass

Go to solution Solved by Cassie,

Recommended Posts

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

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.

  • Like 2
Link to comment
Share on other sites

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:

See the Pen QWrGBWZ by lvekua (@lvekua) on CodePen

 

Thanks again!

 

 

  • Like 1
Link to comment
Share on other sites

You are a genius! Thank you so much! this is exactly what I was aiming for. ❤

  • Like 1
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.
×