Share Posted March 22 I have this code: https://codesandbox.io/s/gsap-playground-forked-n1mcs5 The limegreen box is acting as the viewport of a page, what i want is for each section (red, green and blue boxes) to snap to the "viewport" of the page. Currently using "livesnap" isn't working as intended, what am i doing wrong? Link to comment Share on other sites More sharing options...
Author Share Posted March 22 For some reason, doing this with liveSnap works perfectly fine, but it's not the effect i'm looking for i, because want it to snap when the user releases their mouse. Also i want to know how can i set different units for the snap? i want to use vh or svh instead of px. Link to comment Share on other sites More sharing options...
Solution Solution Share Posted March 22 Hi @essequiel and welcome to the GreenSock forums! Draggable does not have a snap-on-release functionality, just the live snap one (as you already discovered). In order to use an on release snap, you need to integrate the Inertia Plugin, which is a Club GreenSock benefit: https://greensock.com/docs/v3/Plugins/InertiaPlugin You can try all the bonus plugins in Codepen forking this one: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen And you can try them locally and on Codesandbox and Stackblitz using the gsap-trial package: https://www.npmjs.com/package/gsap-trial Here is a fork of your example (I updated the versions of GSAP and React) using the Inertia Plugin: https://codesandbox.io/s/gsap-playground-forked-9cxn9q?file=/src/index.js Finally when it comes to using GSAP in React, GSAP Context is your best friend since it allows you to sope your selectors to a specific ref in your component, super easy cleanup and many other cool things. I'd strongly recommend you to take a peek at the resources in this page: Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted March 22 2 minutes ago, Rodrigo said: Draggable does not have a snap-on-release functionality, just the live snap one (as you already discovered). In order to use an on release snap, you need to integrate the Inertia Plugin, which is a Club GreenSock benefit: That's a shame, thanks for the response anyways! Link to comment Share on other sites More sharing options...
Author Share Posted March 23 For everyone that may come up to this post: I came up with this solution: https://codesandbox.io/s/gsap-playground-forked-lrlnxh?file=/src/index.js It may not be perfect, but it works. 2 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