jarlhelin Posted December 19, 2021 Share Posted December 19, 2021 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 More sharing options...
akapowl Posted December 19, 2021 Share Posted December 19, 2021 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 5 Link to comment Share on other sites More sharing options...
Cassie Posted December 19, 2021 Share Posted December 19, 2021 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 4 Link to comment Share on other sites More sharing options...
jarlhelin Posted December 20, 2021 Author Share Posted December 20, 2021 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 More sharing options...
akapowl Posted December 20, 2021 Share Posted December 20, 2021 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 4 Link to comment Share on other sites More sharing options...
jarlhelin Posted December 22, 2021 Author Share Posted December 22, 2021 I see, I see. Tested and you are correct! Thank you for this... and happy holidays 😄 1 Link to comment Share on other sites More sharing options...
akapowl Posted December 22, 2021 Share Posted December 22, 2021 Good to hear you've got things sorted - happy holidays to you, too! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now