Extract steps from a paused animation

[Shaun]

Given var ani = TweenMax.to(el, duration, {..., paused: true});

 

Is it possible to "extract" the animation frames as an array / object without applying them to the DOM element?

 

Many thanks

[Rodrigo]

Hi and welcome to the forums.

 

As far as I know there's one way to do that. You can create an object with key:value pairs in it with the initial values of the tween and then you create a loop that starts at 0 and ends in the total frame number of the timeline with an onUpdate. Then with the loop you can progress the time() property for the object tween, not the DOM tween, to the loop var number (which would represent the current frame). Finally in the onUpdate call you can register the property being tweened.

var element = document.getElementById("DOMelement"),
    tl = new TimelineMax({paused:true, useFrames:true}),
    object = {objectLeft:0},//you'll tweenn this object instead of the DOM element
    objectTween = TweenMax.to(object, 90, {objectLeft:300, useFrames:true, onUpdate:objectUpdate, paused:true})

//this is the DOM tween which is paused and lasts 90 frames
tl.to(element, 90, {left:300});

for(var i = 0; i <= 90; i++)
{
    objectTween.time(i);
}

//this will be called every time the loop progresses the i value, ie, every 1 frame
function objectUpdate()
{
    console.log(object.objectLeft);
}

There are several examples of this technique created by Jack, in this codepen of the Greensock collection you can see how every element position is determinated without applying it to the DOM element using a loop:

See the Pen ABkdL by GreenSock (@GreenSock) on CodePen

 

And you can create as many simulations you want and register as many properties as you need:

See the Pen Aydqu by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.

[Rodrigo]

Hi,

 

On better inspection there's no need for the onUpdate call, you can achieve the same putting that call inside the loop:

var element = document.getElementById("DOMelement"),
    tl = new TimelineMax({paused:true, useFrames:true}),
    object = {objectLeft:0},//you'll tweenn this object instead of the DOM element
    objectTween = TweenMax.to(object, 90, {objectLeft:300, useFrames:true, paused:true})

//this is the DOM tween which is paused and lasts 90 frames
tl.to(element, 90, {left:300});

for(var i = 0; i <= 90; i++)
{
    objectTween.time(i);
    console.log(object.objectLeft);
}

Best,

Rodrigo.