Jump to content
GreenSock

MaxCode

A little problem with draggable and liveSnap / Draggable Carousel

Go to solution Solved by MaxCode,

Recommended Posts

Hello!
First of all, thank you for everything related to Gsap, you guys are great.
Second, I came with a little problem, I created a carousel using gsap and the progress is controlled with draggable.
The thing is that it works great in a project I created using Vue.js but when I built it using only javascript it does not work properly.

The actual problem is that it does not snap as the one created with Vue.

This is the codepen, I commented out liveSnap, so you can see how it works but if you uncommented liveSnap you will see the problem.

 

 

I  am also sharing a gif of the one I made with Vue, to show how is supposed to work.

 

191651445_ezgif.com-gif-maker(3).thumb.gif.9e46592706937cbbfe8d2ed97bce69f8.gif

 

Many thanks in advance

Max.

 

 

See the Pen ZEvmEJp by maxrpark (@maxrpark) on CodePen

Link to comment
Share on other sites

If I understand your question correctly, the problem is that you don't have InertiaPlugin enabled. Snapping (not liveSnapping) leverages a dynamic end position from InertiaPlugin. So just set inertia: true, load the plugin, use .endRotation instead of .rotation, and you're golden: 

See the Pen YzYRyeO?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? Just beware that InertiaPlugin is a membership benefit of Club GreenSock

 

Good luck with the project! 

Link to comment
Share on other sites

  • Solution

 

Hello! 
Thank you for your answer, even though InertiaPlugin is a great and much better solution I found out why it was not working as I expected.

It turn out in the original code I was using a variable for the transitions, but when I copied and pasted the code on codepen I  did not realize that.

 

See the Pen ZEvmEJp by maxrpark (@maxrpark) on CodePen

 

See the Pen KKZrNqr by maxrpark (@maxrpark) on CodePen

 

After I fixed that it works as the one I created with Vue.

 

It does not look as cool as the one using InertiaPlugin but at least now it snap.

The bug was so simple that it was the last thing I could imagine, I almost went crazy.

 

Again, many thanks for your quick response and solution.

  • Thanks 1
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.
×