Get Timeline Info?

[ajhalls]

I am interested in making a timeline GUI for greensock, but can't seem to find where the info is that gets added to the timeline. I can of course store a redundant copy of what I am inserting into a separate object, but that only works for me as I build my app, it would be great if I could just reference the actual timeline object and extract the info such as:

1. Target
2. Tween (either individual options, or the whole thing)
3. Delay, Duration
4. Start / End Time

 

I have tried using the API with these types of commands:

console.log(main.getTweensOf("#div0"));
or 
console.log(main.getActive());

I found part of it by doing:

console.log(main._first._first._first);

and just to dig in more:

var seen = [];
var val = [];
JSON.stringify(main, function(key, val) {
   if (val != null && typeof val == "object") {
        if (seen.indexOf(val) >= 0) {
            return;
        }
        seen.push(val);
    }
    return val;
});
console.log(seen);

But of course that only shows what happens first, I can't find a reference to what happens next. My test was animating two boxes, div0 and div1 and could only ever find info on the first.

 

[GreenSock]

You mean like this?: 

var children = main.getChildren(),
    child, i;
for (i = 0; i < children.length; i++) {
    child = children[i];
    console.log("child: ", child, "duration:", child.duration(), "startTime: ", child.startTime(), "endTime:", child.endTime());
}

Note: generally anything that has an underscore prefix is not intended to be public. You really shouldn't need to access anything that starts with "_". 

 

Also beware that endTime() factors in timeScale() for you. So for example, if a tween's startTime is 0 and duration is 1 and its timeScale is 0.5, its endTime() would be 2. 

 

If you want to get all the nested children too (like timelines within timelines within timelines, etc.), you can pass "true" to the getChildren() method.

 

You should be able to get pretty much everything you need from the properties and methods we expose. You've seen the docs, right? http://greensock.com/docs/#/HTML5/GSAP/

 

By the way, it's great to hear you're working on a GUI. We'd love to see it when it's ready. 

[ajhalls]

Thanks Jack, that gets me closer, I have 2 tweens and the getChildren returns 4 items in an array, 2 for each. One has a target, the other _target, not sure how to limit that to just a single one per target or really if I need to.

 

I hear what you are saying about the underscore being "private" but where else do I see the vars applied to the target / timeline?

var temp = main.getChildren();
console.log(temp[0]._propLookup[0].x.t._vars);

gives me "TypeError: temp[0]._propLookup is undefined" even though I can browse to it.

 

I was hoping to find the {x:50} value plus any others applied to the target that I could then group in the GUI categorized and in the timeline.

[Carl]

You can access the vars object of any tween like so

 

main.to("#redBox", 1, {x:550, y:20})
  .to("#blueBox", 1, {x:20, y:550, opacity:0.5}, "-=0.5")


var children = main.getChildren(),
    child, i;
for (i = 0; i < children.length; i++) {
    child = children[i];
    console.log(child.vars); //crack open full object in console
    console.log(child.vars.x, child.vars.y); // get specific properies
}

http://codepen.io/GreenSock/pen/VLrWXK?editors=101

 

docs: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/vars/

[GreenSock]

Carl is exactly right (as always) and I also wanted to point out that if you want to get the CURRENT transform values (x, y, z, rotation, scaleX, scaleY, etc.), you can look at the _gsTransform object on the element itself, like yourElement._gsTransform.x. That's the only underscore-prefixed thing I'd say you can use Definitely never do things like tween._propLookup[0].x.t._vars (heck, I'm not even sure what that does, and future versions of GSAP may change some internals that'd make that invalid anyway). 

 

Happy tweening!

[ajhalls]

Thanks guys, I think that gets be going with what I needed, here is a completed pen for anyone that wants to use it:

See the Pen JdOpzz by ajhalls (@ajhalls) on CodePen

 

Also here is the usage of _gsTransform since I couldn't find it in the docs:

$('.foo').get(0)._gsTransform.x

[ajhalls]

This is what I ended up with, you will have to customize it just a little for your use case, but in the end it should be fairly straightforward to customize. For mine the timeline is named "main".

var tlObject = {};
var child={};
var children = main.getChildren(),
    child, i;
    for (i = 0; i < children.length; i++) {
        child = children[i];
        if (child.target)
        {  
            var target = child.target.selector;
            var duration = child._duration;
            var vars = child.vars;
            //build array with an array for each transformation under the same object name
            if(tlObject[target]){}else {tlObject[target]= [];}
                for (var C in child.vars) {
                    var pushVal = {};
                    pushVal[C]=child.vars[C];
                    pushVal['duration']=duration;
                    tlObject[target].push(pushVal)
                }
        }
    }
console.log(tlObject);