TimelineLite: How to set seek() duration or easing?

[acidking]

I researched for a couple of hours but couldn't find how to set the seek duration, when I use seek it snaps to the particular point immediately, is there a way to make it slide smoothly to that point?

[Carl]

You can use TimelineMax.tweenTo() for this

 

Here is a demo:

http://codepen.io/GreenSock/pen/aiGJB

 

Note you can apply custom easing to each tweenTo()

 

var tl = new TimelineMax({paused:true});


tl.to("#box", 1, {left:200, ease:Linear.easeNone}, "label0")
  .to("#box", 1, {top:200, ease:Linear.easeNone}, "label1") 
  .add("label2")


$("#label2").on("click", function() {
  tl.tweenTo("label2", {ease:Bounce.easeOut});
})

[acidking]

Thank you! Is it possible to control the speed by which it tweens? It seems to use the same speed I set in the timeline.

[Rodrigo]

Sure you can use the timeScale() method to change how fast the animation happens, and since the tweenTo method accepts callbacks you can insert an onComplete call to restore the timeScale back to 1 (which means normal speed), this is from Carl's code:

var tl = new TimelineMax({paused:true});

tl.to("#box", 1, {left:200, ease:Linear.easeNone}, "label0")
  .to("#box", 1, {top:200, ease:Linear.easeNone}, "label1") 
  .add("label2")

$("#label0").on("click", function() {
  tl.timeScale(1);
  tl.tweenTo("label0");
})

$("#label1").on("click", function() {
  tl.timeScale(0.25)
  tl.tweenTo("label1", {ease:Back.easeOut, onComplete:resetTimeScale});
})

$("#label2").on("click", function() {
  tl.timeScale(1.5);
  tl.tweenTo("label2", {ease:Bounce.easeOut, onComplete:resetTimeScale});
})

function resetTimeScale()
{
  tl.timeScale(1);
}

Like that when you click on "label1" the animation will go slower than normal speed. If you click on "label2" it'll go faster and if you click on "label0" it'll go at normal speed.

 

Here's the API reference regarding timeScale:

http://api.greensock.com/js/com/greensock/core/Animation.html#timeScale()

 

Rodrigo.

[acidking]

Thank you. I managed to add it in this way:

tl.tweenTo("label2", {ease:Bounce.easeOut, onComplete:resetTimeScale}).timeScale(2);

It wasn't necessary to reset the timer, the timeline would still play the same previous speed.

[jamiejefferson]

And one more option, to have direct control over the duration of the 'tweento' without modifying timescale:

TweenLite.to(tl.pause(), 0.5, {time: tl.getLabelTime("label2"), ease:Bounce.easeOut});