Jump to content
GreenSock

Ayaf Noneym

[GSAP Draggable Utility] onDragEnd Function Animation Not Working!!

Go to solution Solved by GreenSock,

Recommended Posts

the onDragEnd function is not working? Also what I want to achieve is that I want to prevent dragging in left as well as in right direction with animation or specifically with slight bounce animation. If I am not using boundsprop everything is working just fine.

See the Pen zYPWWPj by NikalLawde (@NikalLawde) on CodePen

Link to comment
Share on other sites

  • Ayaf Noneym changed the title to [GSAP Draggable Utility] onDragEnd Function Animation Not Working!!
  • Solution

That's because when you apply bounds, Draggable will instantly force those bounds when you release. So when you try to do a tween in the onDragEnd(), it is ALREADY at 0. 

 

So you could just store the most recent "x" value using the onDrag and then animate from there in your onDragEnd like this: 

See the Pen yLPKGRZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice that I also upgraded your demo to the modern GSAP 3 syntax. I'd STRONGLY recommend ditching the old syntax. The new stuff has been around for years and is more intuitive and concise. No more TweenMax. The duration belongs in the vars, and the ease should be a string. 

  • Thanks 1
Link to comment
Share on other sites

Thanks for the solution!! But just a minor problem, even after tweaking some values I am still not getting the good bounce effect. Can you also adjust that too?? Thanks in advance for that also.

Link to comment
Share on other sites

28 minutes ago, Ayaf Noneym said:

Thanks for the solution!! But just a minor problem, even after tweaking some values I am still not getting the good bounce effect. Can you also adjust that too?? Thanks in advance for that also.

Sorry, I have no idea what exactly you want the effect to look like, but you should be able to adjust the config values of the elastic ease to get what you want. Or if you want a "bounce", just use that ease. See the Ease Visualizer

  • Like 1
Link to comment
Share on other sites

I got the bounce effect as I wanted. But there is something more I want to know, How can I trigger an animation only if we leave drag from a certain directions i.e I have an animation I want it to occur only if I left dragging from left direction.

See the Pen PoOeYba by NikalLawde (@NikalLawde) on CodePen

 

As you can see above the animation is occuring both time even I leave the drag from right direction or left direction.

Link to comment
Share on other sites

4 hours ago, Ayaf Noneym said:

I got the bounce effect as I wanted. But there is something more I want to know, How can I trigger an animation only if we leave drag from a certain directions i.e I have an animation I want it to occur only if I left dragging from left direction.

 

You already have that information. console.log out this.prevX. If it's less than 0, you're going left, otherwise you're going right.

 

  • Like 2
Link to comment
Share on other sites

Yep, prevX is available in onDragEnd. You're already using is in the onDragEnd animation. Now you just need to use an if statement to customize it how you like.

  • Like 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.
×