The position of the <sprite> is off the x-and-y-axis, following a circular {motionPath}

[jarlhelin]

Ladies, gentlemen, 

 

Starting  the GSAP adventure. Due to a weird rotate() - centered sprite problem, when dealing with a grouped <g></g>content not cenetered<g></g>... I finally went for the motionPath() functionality.

 

1 / Question to the experts out there : Why is my sprite off and set to a center-point of "x:0;y:0;" in spite of efforts of centering the content? 

2 / Do I need to place the <SVG> path or something?

 

Thank you for your kind help 🤗

/Jarl

See the Pen OJxgbmP by jarlhelin (@jarlhelin) on CodePen

[akapowl]

Welcome to the forums @jarlhelin

 

You'll need to align it to the motionPath - check the path and align properties in the MotionPathPlugin docs

 

Sidenote:

You've got a spare " at the end of your SVG opening tag that sort of breaks your markup. 

 

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1042.2 1042.2" ">

 

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

[Cassie]

Just popping in to drop a non-motion path example of circular rotation.

Maybe it helps?

 

See the Pen LYzLyXv by cassie-codes (@cassie-codes) on CodePen

[jarlhelin]

Hey @akapowl and @Cassie. Thank you for the good help. Finally, got it around my head. You can not animate anything form outside the<svg> code, it needs to bee inside AND ungrouped. As seen on the red <circle> and the <text> object in this updated version. Sorry for the huge motionPath. 

 

See the Pen wvreXMv by jarlhelin (@jarlhelin) on CodePen

[akapowl]

1 hour ago, jarlhelin said:

Finally, got it around my head. You can not animate anything form outside the<svg> code, it needs to bee inside AND ungrouped.

 

Just making sure there is no misunderstanding here - as you should be able to see in the pen I posted above, you CAN animate things from outside the SVG along a motion-path. You just need to align it to the path, which you forgot to do in the example you posted - the div element is not inside the SVG and it works. And it also works on that group you have with that same class, when you do so.

 

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

 

[jarlhelin]

I see, I  see.

 

Tested and you are correct! Thank you for this... and happy holidays 😄

[akapowl]

Good to hear you've got things sorted - happy holidays to you, too!