Jump to content
GreenSock

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

Animate around a point

Recommended Posts

Hello,

 

I would like to animate an image that moves left/right/left/right around a center point, rotating 3-5 degrees. To be more specific, I would like to animate the top part of a Law Balance scale. (http://www.unc.edu/depts/europe/newsletter/images/101117balance-law.jpg)

 

We purchased a Green membership of Club GreenSock thinking that we can use the TransformAroundPoint for this. It seems like TransformAroundPoint it is not available for JS. Am I right?

 

Is there any other way to create the above animation?

 

Thank you.

 

Alin

Link to comment
Share on other sites

Hello alint, and Welcome to the GreenSock Forums!

 

You can try and use the CSS property transform-origin. In GSAP it would be written as transformOrigin.

 

simple rotate around point:

See the Pen imEzI by jonathan (@jonathan) on CodePen

 

My example uses the default transform-origin of 50% 50% 0  (x y z). But you can try different values to accomplish different transform-origins.

var $circle = document.getElementById("circle"),
TweenMax.to($circle, 4, {
  transformOrigin: "50% 50% 0", // try testing different values
  rotation:360,
  force3D:true                      
});

Here is a more complex example by GreenSock that animates Ferris wheel cars around a Ferris wheel.

 

See the Pen wBbKs by GreenSock (@GreenSock) on CodePen

 

Does that help? :)

  • Like 1
Link to comment
Share on other sites

Yes. Thank you for your help.

 

I figured out the transforOrigin and it does a great the job.

 

Thank you.

 

Alin

Link to comment
Share on other sites

Yes there is no plugin for Javascript here. Luckily! there already exists a transformOrigin property in CSS, so you just use that to set a transform point.

e.g.

TweenLite.set(foo, { transformOrigin: "50% 20px" }); // only needs to be set once for an element
TweenMax.fromTo(foo, 1, { rotation: -20 }, { rotation: 20, repeat: -1, yoyo: true });
Edited by jamiejefferson
I'm such a slow typist....
  • 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.
×