Draggable update snap

[Torben]

I have element which is draggable. On resize I change the transform and I change the draggable.vars with new snap points and call draggable.update()

I thought that would update the snap values.

But what happens is that it jumps when I start dragging after a resize.

 

So here's a Codepen. Try and click toggle to open it. Then you can drag it back out.

But if you resize the window after you've opened it, and then try an drag the element jumps to the old position.

What am I doing wrong?

 

See the Pen BabddVY?editors=1111 by tfl (@tfl) on CodePen

[Torben]

Aha, for anyone finding this.

Updating the transform on resize with gsap instead of native resolves it.

gsap.set(nav, {x: getInPoint()});

 

[GreenSock]

Yep, whenever you work with transform-related properties, it's always best to go through GSAP for those because you generally get better performance and accuracy. For performance reasons, GSAP caches values internally on transforms.

 

Glad you figured it out. 💪