Can not pause a tweenFromTo

[m4g1c14n 1 Likes (Newbie)]

I can not pause an animation that is executed by tweenFromTo

 

Please help

See the Pen rVKZxp by m4g1c14n (@m4g1c14n) on CodePen

[m4g1c14n 1 Likes (Newbie)]

Damn... i have just found the solution myself... I must store the tweenFromTo reference, and pause the reference instead .... 

Sorry , can this post be deleted now? ^^;

[Carl 9,720 Likes (Superhero)]

Sorry I'm late to the party, but glad you found the answer.

 

Yes, when using tweenFromTo() the timeline is technically paused and you are creating an external tween that is changing the time() property of the timeline. 

So you need to pause the tweenFromTo tween.. not the timeline.

[cezaleo 10 Likes (Newbie)]

I have a question regarding this topic.

 

What if I had a codepen pretty similar to this, except with more labels:

See the Pen NqJQaX?editors=001 by ccelestine (@ccelestine) on CodePen

 

Is it possible to tweenFromTo("STEP 1", "STEP3") , 

but skip STEP2?

[Rodrigo 3,492 Likes (Superhero)]

Hi Cyril,

 

It's been a long time!!

 

As far as I know I believe that this can't be done with just one instance, because basically you're going from the time of the first label to the time of the second label, then from the time of the third label to the time of the final label.

1 ---- 2 ---- 3 ---- END
1 ---- 2 skip 3 ---- END

What you could try is get the labels array and create a timeline that first takes the time property of the one you're scrubbing, from the time of the first label, to the time of the second and then from the third to the final. Also since the array returns the labels' names and times you can set the duration of each instance.

// get the labels array
// get the timeline duration between each label
var labelsArr = tl.getLabelsArray(),
    timeStage1 = labelsArr[1].time - labelsArr[0].time,
    timeStage2 = labelsArr[3].time - labelsArr[2].time;

$("#restart").click(function(){
  
  new TimelineLite()
    .fromTo(tl, timeStage1, {time:labelsArr[0].time}, {time:labelsArr[1].time})
    .fromTo(tl, timeStage2, {time:labelsArr[2].time},{time:labelsArr[3].time});
  
});

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

[cezaleo 10 Likes (Newbie)]

Rodrigo,

 

Sorry for the delay.

Thanks for this, pretty awesome!

I'll try to implement, and show you how it worked out once this project goes live!