Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jarlhelin

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

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

I see, I  see.

 

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×