Vizard Posted January 15 Share Posted January 15 Hi I'm trying to create an svg with elements that snap to a target location which I set with liveSnap (see codepen). However, I don't see any snapping behavior. What am I missing? do i maybe need to adjust the cordinate system when using svg? Any help would be greatly apricated! See the Pen rNRjLKa by stefanpullen (@stefanpullen) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted January 15 Solution Share Posted January 15 Hi @Vizard welcome to the forum and thanks for being a club member 🎉 You had typed "LiveSnap" and the property is "liveSnap", without the capital L (happens to me all the time!) It also seems the snap points are relative to the starting position of the element. Hoop dat het helpt en veel geluk met het project! See the Pen KKEaNQZ?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Vizard Posted January 15 Author Share Posted January 15 Haha, omg i'm an idot 😅 Thanks so much @mvaneijgen! I have a small follow-up question if that's ok? After I drag the circle to one of the snapping points, I want to be able to move the cirlce with a tween to a new position using a button input. However, it seems that gsap does not take into concideration that the circle has been dragged to a new posistion. So when pressing the button after the drag, the tween moves the circle relative to i'ts starting posistion. I've updated the codePen to demonstate the issue See the Pen KKEaaQE by stefanpullen (@stefanpullen) on CodePen Enorm bedankt voor je snelle reactie op m'n vorige vraag! Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 15 Share Posted January 15 40 minutes ago, Vizard said: I have a small follow-up question if that's ok? Of course! This happens to me like once every few months, you google something and you'll arrive at your own question that you asked years ago, such a weird experience 🤪 I've used the getRelativePosition function of the MotionPath plugin and feed its values to the tween. I think that this is the most robust solution. Geen dank! See the Pen gOEgmvy?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 3 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