BebDev Posted September 18, 2022 Share Posted September 18, 2022 Hi guys, I'm trying to give my timeline an ID to be used later, but I'm not sure how can I get the timeline instance by its ID. var myTimeLine = gsap.timeline({ id: "mytimeline123", repeat: 3 }); I need something like this: gsap.getByid("mytimeline123"); Cheers! Link to comment Share on other sites More sharing options...
Carl Posted September 18, 2022 Share Posted September 18, 2022 Yes. There is getById() let us know if it doesn’t work. https://greensock.com/docs/v3/GSAP/gsap.getById() Link to comment Share on other sites More sharing options...
BebDev Posted September 18, 2022 Author Share Posted September 18, 2022 Hi @Carl Thanks so much for the reply. Please check this pen. If I have an array of 10 timelines, each one has an ID of "timeline-" + index. See the Pen XWqNEGN by abanobakram (@abanobakram) on CodePen I tried to console the timeline instance on button click, but getting "undefined" Cheers! 1 Link to comment Share on other sites More sharing options...
Carl Posted September 18, 2022 Share Posted September 18, 2022 thanks a bunch for the demo. very helpful. I noticed that if you remove ScrollTrigger and click during the animation it works. If you click after the animation is done playing it will be "undefined" even though you are using a variable as the docs suggest If you need to maintain a reference to an animation even after it completes, you should use a variable Here is a reduced demo without ScrollTrigger See the Pen dyeWOMq?editors=1011 by snorkltv (@snorkltv) on CodePen I'm guessing something is wrong somewhere. I'm sure the @GreenSock team will be able to look into this further when office opens back up. Thanks for your patience. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 18, 2022 Share Posted September 18, 2022 From the docs: Quote Important: GSAP automatically releases animations for garbage collection shortly after they complete, so getById() will only find animations that are active or haven't begun yet. Otherwise, if kept all animations around just in case you're gonna call getById() to find one, it could quickly clog up the system and lead to memory leaks. If you need to maintain a reference to an animation even after it completes, you should use a variable... Saving it as a variable is NOT for the purpose of making gsap.getById() work after the animation completes - it's for giving you a way to reference the animation using your variable GSAP can't possibly know that you saved that variable somewhere in your code (and then conditionally hang onto the reference internally). Does that clear things up? 1 Link to comment Share on other sites More sharing options...
Carl Posted September 18, 2022 Share Posted September 18, 2022 thx for the clarification. It still looks like ScrollTrigger interferes in some way. My getById() function is called 3 times before the animation is triggered (immediately on page load) when the animation begins (via onStart) 3 seconds into the timeline playing (via timeLine.call()) all 3 times gsap.getById("timeLine") returns undefined. scroll down to start the animation See the Pen dyeWOMq?editors=1111 by snorkltv (@snorkltv) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 18, 2022 Share Posted September 18, 2022 I see two issues: It looks like you had a typo - "timeline" instead of "timeLine". When you create any animation with a ScrollTrigger attached, ScrollTrigger will immediately render that animation at its very start (to optimize for performance so it'll be ready to jump into action the moment it's needed when the scroll position is hit). In your case with the timeline, the timeline is completely empty at that point, so rendering it at a time of 0 effectively removes it from the global timeline, making it unfindable via getById(). I'll tweak the next release of ScrollTrigger to skip that immediate render if the duration is 0. Here's a corrected fork: See the Pen abGWpNM?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Carl Posted September 18, 2022 Share Posted September 18, 2022 20 minutes ago, GreenSock said: It looks like you had a typo - "timeline" instead of "timeLine". i guess that could be a problem. oops. thx again. 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