Rotating and TransformOrigin Issues...

[cr33ksid3]

Hopefully this is a simple enough Pen...

 

So, I'm having trouble with transformOrigin and rotation I think. I thought it would be easy to rotate but as you can see, if you watch long enough,  the center of each ring is off. Now, in my Illustrator SVG, I added a transparent outer ring(circle in the SVG) around each ring so that the grouped object would have a true center. Otherwise, if you have an object that is lopsided, the center would change right? Anyway, even with the clear ring around each ring group the center is still off.

 

What am I missing here?

See the Pen 14e4d97d760572e6234e20836487157c?editors=0010 by cr33ksid3 (@cr33ksid3) on CodePen

[cr33ksid3]

Figured it out. My transparent circle in the group was not in the correct place. Placement matters.

[PointC]

Probably a good time to use svgOrigin.

 

    rings.to("#rings1", {
      duration: 30,
      svgOrigin: "300 300",
      rotation: "+=360",
      repeat: -1
    });

I'd also recommend using the GSAP3 syntax and moving the duration inside the vars. You also don't need the linear ease on each tween since it's a default on the timeline.

 

Happy tweening.

 

[PointC]

I know you're still in the early learning stages of GSAP, but I think I'd be remiss in my mod duties if I didn't show you a shorter/easier way to do this. If you just want each ring group to alternate its rotation clockwise/counterclockwise and all the other properties are the same, you can accomplish that with the .wrap() utility method.

 

gsap.to("svg > g", {
  duration: 30,
  rotation: gsap.utils.wrap([360, -360]),
  svgOrigin: "300 300",
  repeat: -1,
  ease: "none"
});

See the Pen e4613d74f3162918e8b74c87f63e877c by PointC (@PointC) on CodePen

 

More info about .wrap()

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

I hope that helps. Happy tweening.

 

[cr33ksid3]

@PointC thank you again for all the pointers... That last response cut my code down tremendously. I knew there was a shorter method of doing this but only knew this at the time... Thanks for great moderation