Animate around a point

[alint 0 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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?

[alint 0 Likes (Newbie)]

Yes. Thank you for your help.

 

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

 

Thank you.

 

Alin

[jamiejefferson 1,185 Likes (Superhero)]

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 August 7, 2014 by jamiejefferson
I'm such a slow typist....