SVG-element not rotating around SVG center

[grizhlie 25 Likes (Newbie)]

Hiya, hopefully a simple one that I'm messing up.

 

I exported the SVG from Affinity Designer 2, not sure if that means anything. I don't think it exports things as well to SVG as illustrator (it chooses "circle" over a "path" for example).

 

I just want the element with "#moon-1" to rotate around the "planet". I looked around and tried to copy other solutions but I think there's just something fundamental I don't understand. Any clue as to what it is?

This code doesn't LOOK wrong but I'm clearly missing something...

 

//Moons

gsap.to("#moon-1", {
  duration: 10,
  rotation: 360,
  svgCenter: "200px 200px",
  repeat: -1,
  ease: Power0.easeNone
});

 

Thank you.

Edit: If anyone has a tool that is great to create SVGs with that is NOT Adobe Illustrator, I'm open to suggestions. I don't think SVGs are Affinity's strength.
 

See the Pen VwEVLWN?editors=1010 by grizhlie (@grizhlie) on CodePen

[akapowl 5,485 Likes (Superhero)]

Hey there @grizhlie

 

It sounds like you are actually looking for svgOrigin - there is no such thing as svgCenter, afaik.

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-svgorigin

 

I'm not entirely sure why, but even if I set that to "200 200" which is supposed to be the center of your SVG, it doesn't align properly - very likely because of the transforms you have on your moon - so you might want to rework that in your SVG Editor.

 

I do recall, that Affinity Designer v1 had an option to flatten transforms on export; so you might want to look for that option in v2, too - maybe it solves that problem for you.

 

Apart from that, setting the svgOrigin to "180 180", appears to be working fine in your case, though.

 

I hope this will help a bit at least. Happy rotating!

 

See the Pen mdzQWyp by akapowl (@akapowl) on CodePen

 

 

 

P.S.: You might also want to consider updating your syntax to the newer v3 syntax (e.g. with regard to durations and eases); although it is still supported, support for the old v2 syntax might get erased in a major future version of GSAP at some point.

 

 

 

[grizhlie 25 Likes (Newbie)]

@akapowl Thanks a ton, super helpful! I'll follow everything you said. 

 

And of course I MADE UP a property, it's a very "me" thing to do 😅...

 

Thanks for everything. I'll redo, learn what I can and will post an improved version as a mini case study of sorts. 

 

Appreciate it.

[akapowl 5,485 Likes (Superhero)]

1 minute ago, grizhlie said:

And of course I MADE UP a property, it's a very "me" thing to do 😅...

 

Been there, done that ... but in hindsight it's always funny to see what naming ideas you can come up with, when you need it the least 😅

 

 

3 minutes ago, grizhlie said:

Thanks for everything. I'll redo, learn what I can and will post an improved version as a mini case study of sorts. 

 

Happy to help. That'd be great for others to see. Good luck with the project  👍 

 

 

[grizhlie 25 Likes (Newbie)]

Alright.

• Updated the syntax to v3
• Flattened the SVG on export in Affinity Designer (2) (I apparently did not know what "flatten" actually means)
• Adjusted the gradient color as it was far too dark 
• Updated everything to svgOrigin 🙃
• I did not have to change the 200px part, so I guess you were correct regarding flattening the SVG? Don't really understand that but that's ok for today.

 

See the Pen gOBQmvQ?editors=1010 by grizhlie (@grizhlie) on CodePen

[akapowl 5,485 Likes (Superhero)]

 

... and even kept the original Codepen Demo as it was, so others can reenact the process of this thread and learn from your Oopsie - just wonderful! 

 

Good job!

 

[grizhlie 25 Likes (Newbie)]

Almost over-wrote it but i remembered how useful seeing the 'journey' is from other posts. 

It's best to keep GSAP forums pristine and useful as they always are!

[Cassie 5,650 Likes (Superhero)]

Just dropping in to say that I use affinity and it's exports are great - you can export out all relative paths too which is super handy sometimes. ✨

[grizhlie 25 Likes (Newbie)]

Thanks @Cassie. After this post I ended up researching SVG's a bit more. It was less about the tool and more about who was using it.

Thanks for the tip on relative-paths, don't really know what that means (yet) but I'll look into it now with a few exports. 

 

Appreciate the help