kalininmax

@mvaneijgen is there I way to trigger some callback when one or all parts are snapped on its places? I want to make some Congrats animation when pazzle is solved. I see only onDragEnd calback, but how to define when I put the piece on its place.

Thank you so much! I just removed Percent and it works like I wanted! But yes I need responsive, so I got the part size via item.getBoundingClientRect().width and item.getBoundingClientRect().height and multiply it like you said. Why I need to init Draggable in onComplete callback? It works even without it, like in my demo.

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)?