Jump to content
GreenSock

Shaun

Extract steps from a paused animation

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

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
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.
×