How to control Draggable initial positions for snap

[kalininmax]

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

See the Pen oNOWxKY by kalininmax (@kalininmax) on CodePen

[mvaneijgen]

Hi @kalininmax welcome to the forum!

 

xPercent and x are to different properties, if you want your logic to work you also have to animate the element using there x and y property, not there xPercent and yPercent values. In CSS there is just one property translateX, but having them split in GSAP can be really powerful. If you want to keep the percentage based movement, just that the elements width and height an multiply it by the value you want to get, for 70% multiply by 0.7 or for 120 multiply by 1.2. 

 

Hope it helps and happy tweening! 

 

See the Pen GRLmqeP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[kalininmax]

19 minutes ago, mvaneijgen said:

Hi @kalininmax welcome to the forum!

 

xPercent and x are to different properties, if you want your logic to work you also have to animate the element using there x and y property, not there xPercent and yPercent values. In CSS there is just one property translateX, but having them split in GSAP can be really powerful. If you want to keep the percentage based movement, just that the elements width and height an multiply it by the value you want to get, for 70% multiply by 0.7 or for 120 multiply by 1.2. 

 

Hope it helps and happy tweening! 

 

 

 

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.

[mvaneijgen]

I was debugging, you can just ignore that. I thought maybe the draggable was initiated before the animations were complete. 

[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.

[Rodrigo]

Hi,

 

You can use live snap with your own custom logic and use that function to do what you're after:

https://gsap.com/docs/v3/Plugins/Draggable/#as-a-function-with-custom-logic

 

If you keep having issues, remember to post a minimal demo.

Happy Tweening!