After scroll or grab, snap back to closest element, when scroll/grab is done

[FrEZ]

When the scroll/grab is done, how do I make it move back to a centered position of the closest element?

See the Pen BaJKyyz by supah (@supah) on CodePen

[GreenSock]

You'd need to add that custom logic based on the angles involved. You could probably use gsap.utils.snap() to get the closest one to whatever increment you're using (assuming the sides are all at equal angles).

 

That actually looks like relatively inefficient code - you're running a bunch of logic on every single tick (in your animate() method) that probably doesn't really need to run on every tick. And it looks like you're creating an entirely new tween onChange - you might want to look into using a gsap.quickTo(). Perhaps the animate() method could simply be called in an onUpdate in your progress tween.

 

You may benefit from InertiaPlugin too which would allow you to smoothly animate to a particular end (snap) value. It's beyond the scope of help we can offer in the forums here to rebuild it all accordingly, but hopefully this gives you a nudge in the right direction. If you'd like to explore paid consulting options, feel free to contact us directly.

 

Happy tweening!