Jump to content


Animate around a point

Moderator Tag

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



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.



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

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.



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.


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.