Jump to content
Search Community

Get timeline by its ID

BebDev test
Moderator Tag

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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

I see two issues:

  1. It looks like you had a typo - "timeline" instead of "timeLine". 
  2. 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

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