GSAP timeScale

[celli]

I have been experimenting with timeScale, while reviewing some of the great forum posts here! I am wondering about this one--What's the best way to timeScale an entire timeline (master timeline) that contains a number of nested timelines ?

 

I'd like to take the master timeline and timeScale it so that in the middle of the timeline it goes much faster, but in the beginning and at the end, it resumes it's regular speed.

 

I've tried a few things as we see in the codePen, but I am still struggling with the best way to accomplish that task. Can I add a timescale to my master timeline directly ? Or is there a better way to get it to work rather than overlapping my timeScale timeline with with my master time and hope they start at the exact same millisecond, and doing a calculation to get the actual time of my master timeline. Maybe some formula that divides my master-timeline's time by 2 and then applies the timeScale to it, so that it speeds up in the middle and then resumes regular speed ?

 

 

See the Pen BKmyKE by celli (@celli) on CodePen

[Rodrigo]

Hi Celli,

 

Have you tried using an onUpdate callback in the master timeline, and depending on the playhead position, increase/decrease the timescale value?.

 

For example let's say that at 25% you want the speed jump and then at 75% you want the speed go back to normal. It would be like this:

function checkPosition(timeline){
  if(timeline.progress() >= 0.25 && timeline.progress() <= 0.75 ){
    Tweenlite.to(timeline, 0.2, {timeScale:3});
  } else {
    Tweenlite.to(timeline, 0.2, {timeScale:1});
  }
}

Here's a simple codepen:

 

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

[celli]

ahh, Rodrigo this is perfect!

[celli]

I have it working, and with one quick question, Rodrigo: How does the name "timeline" in the function here...

function checkPosition(timeline)

...know which timeline to control ? Wouldn't I need to set a variable for 'timeline' ?

[Rodrigo]

Hi,

 

Basically GSAP passes the function being referenced to an apply method. This takes the function to be called and an array of parameters. In the sample basically I'm passing the update function and also the onUpdateParams key-value, which is an array. In that array I referenced to '{self}', which means that the parameter is the GSAP instance, whether is a Tween or Timeline. I used timeline but it could be perfectly "a" or whatever you choose:

function checkPosition(a){
  if(a.progress() >= 0.25 && a.progress() <= 0.75 ){
    TweenLite.to(a, 0.2, {timeScale:3});
  } else {
    TweenLite.to(a, 0.2, {timeScale:1});
  }
  
  target.innerHTML = Math.floor(a.progress()*100)/100 + '<br>' + Math.round(a.timeScale()*100)/100;
}

Then the apply method invoques the function and pass the parameters array to it. Using this, should be valid and in most cases safe, but in order to make things bullet proof, when referencing to the GSAP  instance is better to use '{self}', which later gets referenced as the instance itself.

//Basically '{self}' references to the timeline stored in the variable  tl
var tl = new TimelineMax({repeat:-1, yoyo:true, onUpdate:checkPosition, onUpdateParams:['{self}']});

// this also can be used but someone might want to reserve the word "this" in their
// code, so that could lead to an error
var tl = new TimelineMax({repeat:-1, yoyo:true, onUpdate:checkPosition, onUpdateParams:[this]});

You can check the code here:

 

https://github.com/greensock/GreenSock-JS/blob/b3d1ec5c50859a41a6574f098b698508e5304b55/src/uncompressed/TweenLite.js#L531-L567

 

And the apply method here:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

[celli]

thank you, Rodrigo! I was experimenting with my animation here, and it helped fine tune it a bit, and learn the technique. thanks!

See the Pen aNLRdQ by celli (@celli) on CodePen

[Rodrigo]

Looks really nice, good job!!!

 

Happy Tweening!!

[Carl]

Great explanations, Rodrigo!

 

There are always a few ways to do these things.

 

I think putting timeScale tweens in the timeline will give same results too

 

tl
  .to('#el', 3, {x:200, ease:Linear.easeNone})
  .to('#el', 3, {x:0, ease:Linear.easeNone})
  .to('#el', 3, {y:200, ease:Linear.easeNone})
  .to('#el', 3, {y:0, ease:Linear.easeNone})

  .to(tl, 0.2, {timeScale:3}, tl.duration()*0.25) // at 3 seconds
  .to(tl, 0.2, {timeScale:1}, tl.duration()*0.75) // at 9 seconds

http://codepen.io/GreenSock/pen/XdzPBg?editors=0010

 

I think I learned this trick from Diaco.

[PointC]

That's really cool Carl.

 

I'm gonna have to remember that one. It could come in quite handy.

[Diaco]

in addition to Carl and Rodrigo , if i understand correctly , you can simply use SlowMo ease type too :

tl
  .to('#el', 3, {x:200, ease:Linear.easeNone})
  .to('#el', 3, {x:0, ease:Linear.easeNone})
  .to('#el', 3, {y:200, ease:Linear.easeNone})
  .to('#el', 3, {y:0, ease:Linear.easeNone})


  .from(tl,tl.duration(),{timeScale:5,ease:SlowMo.ease.config(.6,.7, true)},0)
  //.from(tl,tl.duration()-2,{timeScale:5,ease:SlowMo.ease.config(.6,.7, true)},1)

See the Pen qZVgpv by MAW (@MAW) on CodePen