Jump to content
Search Community

How to snap to a section in a Draggable

essequiel test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

  • Solution

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...