Ayaf Noneym Posted February 20, 2022 Share Posted February 20, 2022 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 More sharing options...
Solution GreenSock Posted February 21, 2022 Solution Share Posted February 21, 2022 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. 1 Link to comment Share on other sites More sharing options...
Ayaf Noneym Posted February 21, 2022 Author Share Posted February 21, 2022 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 More sharing options...
GreenSock Posted February 21, 2022 Share Posted February 21, 2022 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. 1 Link to comment Share on other sites More sharing options...
Ayaf Noneym Posted February 21, 2022 Author Share Posted February 21, 2022 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 More sharing options...
OSUblake Posted February 21, 2022 Share Posted February 21, 2022 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. 2 Link to comment Share on other sites More sharing options...
Ayaf Noneym Posted February 22, 2022 Author Share Posted February 22, 2022 Thanks for the suggestion!! It helps! Link to comment Share on other sites More sharing options...
OSUblake Posted February 22, 2022 Share Posted February 22, 2022 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. 1 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