SpiritedMan Posted November 6, 2023 Share Posted November 6, 2023 Hi everyone! i wanted to create draggable queen with GSAP draggable, like on chess websites... but i couldn't figure out how to make piece snap to board squares. See the Pen WNPoJRa by alexander1369 (@alexander1369) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2023 Share Posted November 6, 2023 Hiya! Here's a solution using inertiaPlugin See the Pen jOdyVjM by GreenSock (@GreenSock) on CodePen It's a Club GSAP plugin, but honestly well worth it - Draggable & Inertia make magic together. 2 Link to comment Share on other sites More sharing options...
SpiritedMan Posted November 6, 2023 Author Share Posted November 6, 2023 Thank you Cassie! but when i set inertia to false , it doesn't snaps to grid squares, can it snap without inertia, like on https://lichess.org/training ? Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2023 Share Posted November 6, 2023 I can't seem to drag anything there - obviously my lack of chess knowledge hampering things. Does this demo help? See the Pen JjwZzNG by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
SpiritedMan Posted November 6, 2023 Author Share Posted November 6, 2023 yes but it still has inertia when i drag and release, it animates in between, i want to make it snap on square without animation.. Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2023 Share Posted November 6, 2023 Did you see the livesnap option? Link to comment Share on other sites More sharing options...
SpiritedMan Posted November 6, 2023 Author Share Posted November 6, 2023 yes , but with livesnap checked, you can only drag it on grids... here is another demo https://sebastian.itch.io/knight-jump-visualizer or this https://lichess.org/editor/8/8/8/8/4Q3/8/8/8_w_-_-_0_1?color=white Link to comment Share on other sites More sharing options...
Rodrigo Posted November 6, 2023 Share Posted November 6, 2023 Hi, I don't have time right now to go into this, but you can definitely try the hitTest method in Draggable: https://gsap.com/docs/v3/Plugins/Draggable/static.hitTest() Based on that you can set the final position of the element using the onDragEnd callback: Draggable.create(knight, { onDragEnd() { // Run hit test logic here using this.hitTest() // Then use a set() instance gsap.set(knight, { x: 0, // calculated value y: 0, // calculated value }); }, }); Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
SpiritedMan Posted November 7, 2023 Author Share Posted November 7, 2023 naah I'm to dumb, i couldn't figure it out... i did it in plane js Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now