I have a SVG logo (screenshot 1). It has some parts for draggable, I want to snap them to its initial positions (sceenshot 1) when dragging them,
that's why I use points: [{ x: 0, y: 0 }].
But also I need to animate the parts with gsap.to() to move them from its initial positions (screenshot 2).
That's how I do this:
// init draggable
Draggable.create(draggableEls, {
type: 'x,y',
bounds: container,
liveSnap: {
points: [{ x: 0, y: 0 }],
radius: 20,
},
});
// move parts from its initial positions
gsap.to(draggableEls, {
xPercent: (index) => LetterPos[index]?.x,
yPercent: (index) => LetterPos[index]?.y,
ease: 'power3.out',
duration: 1,
});
But for some reason liveSnap snaps the parts to gsap.to() final positions (screenshot 2), but not to initial (sceenshot 1). I thought if I init Draggable before gsap.to() it will save the initial positions for snapping. How can I init/config Draggable so that it remembers the initial positions of the pieces before animation, and snaps to initial positions (screenshot 1)?