Rotate around point not working as expected

[ChaBuku]

Hey, I'm trying to animate my friend Lenny, but it seems that I cannot get his pupil to rotate around the svgOrigin: svgOrigin: "240px 381px"

It can move his pupil to the left and right from the origin just fine, but when I try to rotate, it just doesn't work.

 

Click on the Purple button to rotate his left pupil (eventually trying to get both rotating, but one at a time!)

 

See line 34 of the JS on the Codepen where I am trying to rotate.

See the Pen YzwrEYN by adbakke (@adbakke) on CodePen

[ZachSaucier]

Hey ChaBuku and welcome to the GreenSock forums! I like your character.

 

I noticed that you're using a really old version of GSAP. We highly recommend using GSAP 3! If you drop in the latest GSAP 3 core file in your project you can see that it works with the old syntax that you have. But upgrading to the newer, sleeker syntax is easy - just follow this guide:

 

 

But onto your question - changing the SVG origin (say to "0 0") work just fine for me in your demo. Are you just asking which values should you use? If so, that's for you to decide what looks best  

[ChaBuku]

@ZachSaucier thanks for that recommendation, I had built my my demo from a tutorial, but was still having issues on my local development using GSAP 3. 

 

I noticed the example in this document: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin under "svgOrigin" uses an old version of GSAP

 

Can you tell me how the svgOrigin works? If the id=#eye1 inside of my <svg id="lenny-worried"> is centered at x:240 and y:381 (relative to the entire svg #lenny-worried), can I use that point relative to the SVG? Or do I need to use an origin that is relative to the eye itself? If I use one relative to the eye itself, is it relative to where it is *right now* or is it relative to where it started (240, 381 inside the svg, or at the very beginning of the animation relative to itself 0, 0).

 

I have updated my above CodePen with GSAP 3 and updated syntax, and have it working, but it doesn't make sense why svgOrigin isn't working. I would like to set the center of the eye for the pupil to rotate around, which is 0, 0 relative to itself at the beginning of all animations.

 

 

[ZachSaucier]

15 minutes ago, ChaBuku said:

I noticed the example in this document: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin under "svgOrigin" uses an old version of GSAP

Good find. I just updated it to use the latest GSAP version  

 

17 minutes ago, ChaBuku said:

Can you tell me how the svgOrigin works? If the id=#eye1 inside of my <svg id="lenny-worried"> is centered at x:240 and y:381 (relative to the entire svg #lenny-worried), can I use that point relative to the SVG? Or do I need to use an origin that is relative to the eye itself?

svgOrigin is in reference to the containing <svg> element's coordinate space. If you want to use a more local rotation, use transformOrigin like your updated demo does. 

[ChaBuku]

8 minutes ago, ZachSaucier said:

svgOrigin is in reference to the containing <svg> element's coordinate space. If you want to use a more local rotation, use transformOrigin like your updated demo does. 

@ZachSaucier: Does svgOrigin change locations as the animations continue and the placement changes?

 

Does svgOrigin use the svg's placement inside the entire document? Or relative to its own top left (in this case top-left #lenny-worried, not #eye1)?

 

I updated the demo using svgOrigin for the left pupil, which again sits at x:240 and y:381, but when it rotates, it rotates completely off his face. What is going wrong with my origin? Why won't the pupil rotate around 240, 381?

 

 

[ZachSaucier]

27 minutes ago, ChaBuku said:

Does svgOrigin change locations as the animations continue and the placement changes?

No, why would it?

 

28 minutes ago, ChaBuku said:

Does svgOrigin use the svg's placement inside the entire document? Or relative to its own top left (in this case top-left #lenny-worried, not #eye1)?

Both? The SVG is positioned in respect to the page and the svgOrigin is positioned in respect to the SVG...

 

28 minutes ago, ChaBuku said:

I updated the demo using svgOrigin for the left pupil, which again sits at x:240 and y:381, but when it rotates, it rotates completely off his face. What is going wrong with my origin? Why won't the pupil rotate around 240, 381?

It is rotating around 240, 381. 240, 381 is way outside of your SVG (which has a viewBox of 251.34, 211.56) in the y direction.

[OSUblake]

13 hours ago, ChaBuku said:

I updated the demo using svgOrigin for the left pupil, which again sits at x:240 and y:381, but when it rotates, it rotates completely off his face. What is going wrong with my origin? Why won't the pupil rotate around 240, 381?

 

That's not where they sit.

 

 

 

The center of it would be the x + width / 2 and y + height / 2.

 

And you only need to set the svgOrigin one time, not in every tween.

gsap.set(eye1, {
  svgOrigin: '65.66 89.79', // does not work
})

 

You're power3 ease in incorrect, and you don't need to put numbers in a string.

rotateLeft.to(eye1, {
  rotation: 180,
  duration: 0.75,
  ease: 'rough'
})
 .to(eye1, {x: -20.19, duration: .25, ease: "power3.in" }, '+=1');

 

[ChaBuku]

Thanks folks! I realized after taking a closer look that I was finding the origin wrong in Illustrator.

 

I'm super glad to know I was using dated syntax and updated everything and it's all working smoothly.