Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Black Ducas

Infinite rotation starting with easeOut and ending infinite with ease linear

Recommended Posts

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

Link to post
Share on other sites

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

Link to post
Share on other sites

@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?

  • Like 1
Link to post
Share on other sites

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.

 

  • Like 1
Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites
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? 

  • Like 3
Link to post
Share on other sites

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

 

Link to post
Share on other sites

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? 

  • Like 2
Link to post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×