Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
johnnyno

Rotating a spinning object around a central point

Recommended Posts

Hi

 

I'm trying to rotate an object around a central point. In this case the object is a pie. I want the pie to be spinning as it rotates!

 

Any ideas?

 

Many thanks!

See the Pen LNyyYN by johnnyno (@johnnyno) on CodePen

Link to comment
Share on other sites

The easiest way I can think of is to tween the rotation of the div with the transform origin where you have it, and at the same time tween the rotation of the img itself at its default transform origin.

 

See the Pen KzmmzJ by sgorneau (@sgorneau) on CodePen

  • Like 6
Link to comment
Share on other sites

Thanks Shaun, you're a star!!!

  • Like 3
Link to comment
Share on other sites

Hi guys :)

 

in addition ; you can use a bezier Tween too : 

See the Pen VabQZK by MAW (@MAW) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks Diaco, because I now have this 

See the Pen GZmwML by johnnyno (@johnnyno) on CodePen

 

The aborting pies are not following the exact same orbit...

 

Could I use the bezier tween to create a consistent orbit for all the smaller pies?

 

Thanks

Link to comment
Share on other sites

Awesome solution, Diaco!

  • Like 1
Link to comment
Share on other sites

i think this can help you too ,

 

it's svg , but you can use that for div/img tag too ; now you can simply set the number of objects to orbit : 

 

See the Pen RaVzmz by MAW (@MAW) on CodePen

  • Like 6
Link to comment
Share on other sites

awesome gears animation!

  • Like 1
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.
×