Jump to content


Is it possible to read the tween values at a specific time?

Moderator Tag

Recommended Posts

For example:

I want to place some objects on the path of the tween for a graphical effects.

So I'll tween a target with x=0 to x=100, over 1 second. And then I want to read the X value at multiple different times, say at 0.2, 0.4, 0.6 and 0.8 seconds.


Is there a way to simply go: tween.read(.2) and have it return {x:20} or something like that?


I know I can use time() on the tween, then read the value, and the return the playhead to the original time, but that seems cumbersome.

Link to comment
Share on other sites

Thanks for the reply Diaco, but it's not exactly what I'm after.



I was hoping to have something like this:

var tw = TweenMax.to(target, 10, {x:100});

tw.valuesAt(2);// {target:target, x:10}
tw.valuesAt(5);// {target:target, x:50}
tw.valuesAt(8);// {target:target, x:90}

I need to be able to read the values without reconstructing the tween.


Right now I fear I have to use .time() to set the target's value, then read them, then return .time() to what it was. All before I update my canvas. Which feels bulky. But I'll do that for now.

Link to comment
Share on other sites

hmm , how about something like this :


var Box = document.querySelector('.box');
var myTween = TweenLite.to(Box,2,{x:200});

function valuesAt(tween,P,time){
  var X={};  X[P]=0;
  return { target:tween.target , [P][P] };

 console.log( valuesAt(myTween,'x',1) );   // Object { target: div.box, x: 150 }
 console.log( valuesAt(myTween,'x',1.5) ); // Object { target: div.box, x: 187.5 }
 console.log( valuesAt(myTween,'x',2) );   // Object { target: div.box, x: 200 }


  • Like 1
Link to comment
Share on other sites

I love it, Diaco!

My current code is way less elegant than that.

Thank you!

Link to comment
Share on other sites

Nice Diaco, to add to Diaco's great solution,


Another way (not as elegant as Diaco's example) is to also use an if statement inside a GSAP callback onUpdate:


See the Pen LpOLQe by jonathan (@jonathan) on CodePen


The below is just an example of checking the progress and then grabbing the transform property if that progress time is met. This solution can be used for any property of GSAP within an onUpdate

var $circle = document.getElementById("circle"),
    tl = TweenMax.to($circle, 4, {
       rotation: 360,
       onUpdateParams: ["{self}"], // passes the timeline instance of this tween
       onUpdate: function(tl) {

          var tlt = tl.time().toFixed(2), // actual time with only two deciaml place
              tlp = tl.progress().toFixed(1); // actual progress of duartion with only one deciaml place
          $("#time > span").html(tlt);

          if (tlp == 0.5) { // half of duration 2 seconds since duration is 4 seconds above
             // outputs the value of x in pixels
             $("#progress > span").html(tl.target._gsTransform.x.toFixed(0)+"px");
             // tl.target._gsTransform.x


TweenMax or TimelineMax onUpdate:

  • onUpdate : Function - A function that should be called every time the animation updates (on every frame while the animation is active).
  • onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, TweenLite.to(element, 1, {left:"100px", onUpdate:myFunction, onUpdateParams:[mc, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onUpdateParams:["{self}", "param2"].



I was just checking the progress of the duration. But you can check various ways inside the onUpdate using time() or progress() or totalTime()


Just my two cents! :)

  • 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.