Jump to content
GreenSock

amoeboar

How to tween simultaneous rotations

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone, I'm really enjoying this tool and the support form the community so far. I'm trying to wrap my head around how the timelines can be staggered, and specifically I'm trying to have simultaneous rotations happening at once.

 

I'm trying to recreate this pen (which uses CSS animations)

See the Pen LimxH by mikehobizal (@mikehobizal) on CodePen



using GSAP instead. My work in progress is here:

 

It's almost there, but it's not quite right. The main issue is that each rotation completes before the next one begins, whereas in the CSS animation it transitions between the different angle rotations at 0%, 25%, 50%, etc. 

 

So my question is: how can I create a more seamless animation between each rotation transition? Instead of:

 

Rotate 180 degrees. Stop.

Rotate 540 degrees. Stop.

Rotate 900 degrees. Stop.

 

I want instead something like:

Rotate 180 degrees into 540 degrees into 900 degrees. Stop.

 

Or perhaps I'm approaching this wrong? I'm open to any suggestions that might achieve the effect of replicating the CSS animation using GSAP. I would love some help while I try to wrap my brain around this.

 

Thank you very much!

See the Pen MyrMqZ by amoeboar (@amoeboar) on CodePen

Link to comment
Share on other sites

Hi amoeboar  :)

 

Welcome to the forums.

 

This looks like a great job for a stagger. We can get this down to one line of code for you.

TweenMax.staggerTo('.refill-circle', 15, {rotationY:540, rotationX:1080, ease:Power1.easeInOut},0.3)

You might have to play with the rotations and stagger time to get it to your liking, but I think this should work for you.

 

See the Pen RaxzdV by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

 

Edit: I forgot to mention it, but if you haven't read about stagger yet, please check out the docs here:

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

  • Like 3
Link to comment
Share on other sites

Awesome stuff!

I had to fork it.

twas a good fork!  ;-)

  • Like 2
Link to comment
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.
×