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

[Ringo]

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.

[Diaco]

Hi Ringo 

 

i think this thread can help you : : http://greensock.com/forums/topic/12534-pick-value-between-2-css-values-using-gsap/

[Ringo]

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.

[Diaco]

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;
  TweenLite.to(X,tween._duration,tween.vars).seek(time).kill();
  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 }

 

See the Pen 85bddbf55cdbd22800c7a9be4ac123d9 by MAW (@MAW) on CodePen

[Ringo]

I love it, Diaco!

My current code is way less elegant than that.

Thank you!

[Jonathan]

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,
       x:400,
       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
        
          }
       }
   });

tl.play();

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"].

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

 

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!