Seamless switch between two tweens or timelines

[cheister]

Hi, 

I am currently building GUI elements which should show different animations on different states but I need a smooth transition. 

How can I achieve a immediate but smooth transition between e.g. the following tweens

State 1: Should rotate only and should not scale
tween = TweenLite.fromTo(box, 10, {rotation: 0}, {rotation: 360, ease: "linear" , repeat: -1})

 

State 2 Should yoyo scale only  should not scale

tween = TweenLite.fromTo(box, 1, {scaleX: 1, scaleY: 1}, {scaleX: 0.8, scaleY: 0.8, ease: "bezier", yoyo: true, repeat: -1

State 3 ... 

 

I tried several methods by just changing the tween, but then I need to kill() the current tween and restart() the tween which creates jumps in the animation.

Any help appreciated! 

 

 

[ZachSaucier]

Hey cheister and welcome to the GreenSock forums!

 

26 minutes ago, cheister said:

How can I achieve a immediate but smooth transition between e.g. the following tweens

It's technically impossible to have a transition be both immediate (i.e. duration of 0) and smooth (which requires a duration > 0). 

 

What I'm guessing you're wanting is a way to slow down an animation to a stop and then slowly start another animation, correct? 

 

GSAP's timeScale ability is perfect for that:

See the Pen Powbvad?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note that I don't make use of paused/playing at all - I'm just setting or tweening each timeline's (or tween's if you'd prefer to switch them out) timeScale.

 

Side note: it looks like you're mixing up some GSAP 3 formatting (like the string ease "bezier") with GSAP 2 formatting (like the duration parameter). We recommend using all GSAP 3 formatting like I did in the demo above, but you'll need to load GSAP 3 to have your code work as you're expecting even if you don't use all the GSAP 3 formatting.

[cheister]

"Immediate" was misleading, it just meant that transition between the two states / tweens should start immediately, e.g. on click.  Many thanks for your solution which looks perfectly what I was looking for!