Share Posted April 17, 2021 Hi, 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 More sharing options...
Share Posted April 17, 2021 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? 2 Link to comment Share on other sites More sharing options...
Author Share Posted April 17, 2021 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 More sharing options...
Share Posted April 17, 2021 Hey @leonardpbd, Here is another option that the user can click from point to point. The focus always remains on the top of the building path in the middle of the screen. See the Pen xxgJqpp by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 1 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted April 18, 2021 We don't normally offer "build to order" solutions here, but I decided to whip it up for ya: See the Pen OJWwaEZ?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 18, 2021 Sorry about being a pain. I'm still figuring it out myself but really couldn't make it work. Thank you! Link to comment Share on other sites More sharing options...
Share Posted April 19, 2021 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 19, 2021 Hi again 😅 So they've added another path extension. I was wondering how can I trigger the last path only if all items are completed? See the Pen bGgxBGd by leonardpbdigital (@leonardpbdigital) on CodePen As you can see the scrolling isn't working flawlessly unlike the one in CodePen. Link to comment Share on other sites More sharing options...
Share Posted April 19, 2021 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. 2 Link to comment Share on other sites More sharing options...
Share Posted April 19, 2021 Hey @leonardpbd, There's another option here. To keep the focus on the 'current circle', you can adjust the y coordinate in the viewBox. See the Pen OJWoxBX by mikeK (@mikeK) on CodePen Happy moving ... Mikel 2 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