Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Manfrex

Getting tweens, labels and function calls from a timeline

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello!

I am building a timeline visualizer, that you can easily connect with any timelines you've made with gsap. The idea is to represent the timeline visually, and let the user scrub through it.

 

It's easy to visualize the labels, since there is a _labels property on each timelinelite instance. However, what I would like to know is:

Is there any good way to get a reference to all tweens within a timeline, and all function calls? I'd like to know the time and duration of all tweens within a timeline so I can represent them visually, and also the time and name of all function calls within a timeline. Is this possible?

 

Thank you.

/Alexander

Link to comment
Share on other sites

Hi Manfrex  :)

 

you can use .getChildren() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getChildren/

Returns an array containing all the tweens and/or timelines nested in this timeline.

 

 

and .getLabelsArray() method  : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelsArray/

Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline.

 

pls check the Timeline Doc. for more detail and other methods : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

  • Like 1
Link to comment
Share on other sites

The methods that Diaco shared are exactly what you should use for getting all the info about child tweens and labels. 

However, I'm doubtful there is a way to get the name of a function that you send into call(). Yes, you can create a variable that references a function,

var f = function() {
  console.log("f");
}

but that does not give the a function a name that gets stored anywhere or that is accessible programatically. In other words, you can't ask a function what its name is, which also means you can't ask TimelineLite: "Hey, what's the name of the function you are going to call at 3 seconds?". I know it may be confusing, but that's the best I got ;)

 

If anyone else has any insight, I'm all ears. I'm certainly not the foremost expert on JS.

Link to comment
Share on other sites

  • Solution

Technically functions are just objects, so you can add properties to them. JavaScript is super dynamic. So, for example: 

var func = function() {
   //do stuff
}
func.name = "myFunction"; //slap a property on it

timeline.add(func, 2); //drop it into the timeline

//later, grab the children and loop through them to find the one that's named "myFunction" (or whatever you want)
var children = timeline.getChildren();
for (var i = 0; i < children.length; i++) {
    if (typeof(children[i].target) === "function" && children[i].target.name === "myFunction") {
        //FOUND IT!
    }
}
  • Like 2
Link to comment
Share on other sites

I don't think using "name" is a good idea. That's a read-only property and you will get an error in strict mode. Use something like "_name" instead.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hello!

Sorry for the long delay. Thank you so much for the info. Super helpful! :D

 

Cheers!

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.

×