Timescale only a part of a timeline ?

[multivac]

Is it possible to compress/timescale a specific portion of a timeline ?

For example I would like the first 5 seconds to take only 0.5 seconds and the rest of the timeline to be normal.

Thank you

 

[Sahil]

So I found three ways to do it, it depends on what you are trying to do and will be a lot harder to control if it is complicated.

 

1. You can use TweenMax to animate timeline's 'time'.

2. You can use timeline's tweenTo or tweenFromTo method, then you can use tweenTo's callback to resume the timeline.

3. Finally you can use tweenTo or tweenFromTo to play entire timeline, it will give you a lot more control.

 

I have left some comments, go through docs of respective method if you don't understand. Otherwise feel free to ask more questions.

 

See the Pen bYQZGE?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[mikel]

Hi @multivac,

The easy way: two timelines!

 

Or create a custom easing. (here: https://greensock.com/docs/Easing)

 

Happy tweening ...

Mikel

[Carl]

Below is a demo that creates 1 timeline called boxes that moves and rotates boxes at a constant (linear) speed.

I create another timeline that immediately sets the timelineScale of boxes to 0.5 (half speed).

1 second later it tweens the timeScale of boxes to 2 to make the change more noticeable.

You will see the animation smoothly speed up after 1 second.

 

See the Pen zPMQWz by GreenSock (@GreenSock) on CodePen

If you edit the pen you can change the showTimeScaleTweening value to false (line 1) to see how the boxes timeline would play normally.