Infinite rotation starting with easeOut and ending infinite with ease linear

[Black Ducas 8 Likes (Newbie)]

Hi 

I have to develop this animation where an image starts from scale:0 and opacity:0 then grows rotating with an easing power2.out then keeps it rotating infinite by linear easing.

 

Some ideas?

Thanks

[Sahil 2,650 Likes (Superhero)]

Use timeline where both tweens start at the same time, make rotation tween infinite. (you can use two tweens directly without timeline)

 

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

[Black Ducas 8 Likes (Newbie)]

Hi @Sahil

wow, so thanks! Almost there. I need the first tween to have a faster rotation at the beginning that decrease (ease out). At this point with this slower speed starts the second tween that infinitely rotates at that slower speed.

I don't get how to achieve this

[Sahil 2,650 Likes (Superhero)]

With GSAP 2 it was possible to animate timeScale,

 

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

 

Same trick doesn't work with GSAP 3

 

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

 

@GreenSock has something changed with timeScale in gsap 3?

[Black Ducas 8 Likes (Newbie)]

@Sahil the GSAP 2 codepen is exactly what I need! But I'm working on GSAP 3 and you're right, that timeScale doesn't work as expected.  

@GreenSock is it maybe a bug or something? Just in case, any idea for a workaround?

[mikel 4,756 Likes (Superhero)]

Hey,

 

To tween timescale  I always recommend the pen of @OSUblake - here GSAP 3

 

See the Pen abzwvGm by mikeK (@mikeK) on CodePen

 

Happy scaling ...

Mikel

[Black Ducas 8 Likes (Newbie)]

Hi @mikel

it seems the same as made by @Sahil

 

gsap.fromTo(tween, {timeScale: 3}, {timeScale: 1, duration: 1});

What's wrong?

[Sahil 2,650 Likes (Superhero)]

Seems like GSDevtools was causing some conflict, removing it fixed the issue.

 

See the Pen VwYWeZX by Sahil89 (@Sahil89) on CodePen

[Black Ducas 8 Likes (Newbie)]

Yeah @Sahil, that's awesome! ? Thanks

 

Could I ask you some details?

1) Why you use timeline for first tween? Is it needed or it works also with a simple tween? If I'm not wrong we should use tween as much as possible, in place of timelines, right? ? 

2) For the first second (duration:1) of the whole animation we have 3 tweens that act at the same time on the same element. Is this a common technique from the docs or it could causes conflicts?

 

Thanks again.

 

[Sahil 2,650 Likes (Superhero)]

1) You could use just tweens as it needs fewer calls.

2) Ya that won't cause any conflict as long as you aren't trying to animate same properties at the same time.

[GreenSock 16,973 Likes (Superhero)]

16 hours ago, Sahil said:

@GreenSock has something changed with timeScale in gsap 3?

Good catch, @Sahil! This was really tricky to diagnose - it'd only happen if you set the timeScale() on the same tick as a tween starts that's also affecting that timeScale() of the other animation. It should be resolved in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

?

 

Does that work better for ya? 

[mikel 4,756 Likes (Superhero)]

Hey @GreenSock,

 

The smooth start always starts at timescale 1, runs without the smooth tween even though timeScale is 0.
The stop function runs as expected.

 

See the Pen jOEwWNO by mikeK (@mikeK) on CodePen

 

This version runs as expected

 

See the Pen QWwgvqq by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

[GreenSock 16,973 Likes (Superhero)]

That is expected behavior - remember, when you pause() an animation, that effectively sets its timeScale to 0, so when you play() that sets it back to 1. There is extra code to allow edge cases where you set timeScale apart from play/pause, but I'm not sure how we could reconcile the logic in the scenario you presented. If you set the timeScale to 0...and then you call play() on an animation...what would you expect to happen? Should it just not do anything (remain paused)? That wouldn't sound very intuitive. See the issue? 

[mikel 4,756 Likes (Superhero)]

Hey Jack,

 

Thank you for your comments.

 

In my imagination timeScale(0) is like paused().
Just as it works in the stop function.

 

But if this is a conflict in combination with play(), then let's give a hint in the DOCs, show an example.

 

I find the possibility to arrange start / stop smooth with timeScale() very helpful - I have also integrated an ease: "power4.in".

 

See the Pen KKwvMQb by mikeK (@mikeK) on CodePen

 

Happy smoothing ...

Mikel