Draggable Snap and svg?

[Vizard]

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

[mvaneijgen]

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

[Vizard]

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!

[mvaneijgen]

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