Jump to content
Search Community

Adding animation in a sequence with a callback

leonardpbd test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts



I was wondering on how can I add a callback right after the animation using stagger if possible.


I wanted to iterate each item inside the .path-roadmap__lessons and use their data attribute as the value of the progress bar for my SVG and to add a class as completed (I'll be adding a circle progress bar here as well) once it reached the value and so on.


So basically there will be one active button and that's where the progress will stop. 


I already tried the stagger and .each loop but for some reason I couldn't make it work. 


Hope someone could help me. 


Thank you!

See the Pen QWdxVaN by leonardpbdigital (@leonardpbdigital) on CodePen

Link to comment
Share on other sites

I'd probably do it like this: 

See the Pen BapPRLz?editors=0010 by GreenSock (@GreenSock) on CodePen


I assumed you wanted to add an "active" class when the path reached a lesson, right? I just tucked callbacks onto the timeline accordingly, and sensed if the timeline is moving backwards (remove the class) or forward (add the class), and did a timeline.tweenTo(). 


Is that what you're looking for? 

  • Like 2
Link to comment
Share on other sites

Hey thanks for this!


It shouldn't go backwards, the only way is to move forward and I'd like to scroll down on the current active button if that's possible.


So I should just call any action I want inside setSection function correct?


Could you please review my code here and how can I target each .courseprogress per item so it will only load once it reached the active button 

See the Pen VwPBWKm by leonardpbdigital (@leonardpbdigital) on CodePen


Sorry, I'm still absorbing your code 😅


Thank you this is very helpful!


Link to comment
Share on other sites

13 hours ago, leonardpbd said:

Sorry about being a pain.

I'm still figuring it out myself but really couldn't make it work. 

No problem at all. You're not being a pain. I chose to work out that code for you because I was curious, had a little time, and wanted to be generous. I didn't feel obligated at all, and it's totally fine for you to ask GSAP-related questions around here. 


Good luck with your project. 

  • Like 1
Link to comment
Share on other sites

Yeah, this is wandering into the realm of consulting for general logic flow stuff :) We're happy to answer any GSAP-specific questions here in these forums, but this has drifted beyond the scope we do here for free. 


33 minutes ago, leonardpbd said:

I was wondering how can I trigger the last path only if all items are completed? 

I don't have time to dig into your code, but it seems like it'd just be adding some conditional logic. 


36 minutes ago, leonardpbd said:

As you can see the scrolling isn't working flawlessly unlike the one in CodePen. 

We don't really troubleshoot live web sites because there are so many other complexities, libraries, etc. that could be causing issues. It's always a good idea to try to isolate things in a CodePen or something. You can start small, and then slowly add things until it breaks and then it'll be much easier to see what the problem is related to. 


If you still need some help, it may be time to hire someone. I'd recommend posting in the "Jobs & Freelance" forum or you can reach out to us directly - we do offer a limited amount of paid consulting services. I definitely want you to get the help you need. 

  • Like 2
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.
  • Create New...