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

[Ayaf Noneym]

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.

[GreenSock]

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. 

[Ayaf Noneym]

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.

[GreenSock]

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. 

[Ayaf Noneym]

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.

[OSUblake]

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.

 

[Ayaf Noneym]

Thanks for the suggestion!! It helps!

[OSUblake]

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.