Alnat2 Posted August 20, 2020 Share Posted August 20, 2020 Hi everyone, I made some card concepts using the Draggable plugin, but the problem is that sometimes clicks or drags doesn`t work. Any ideas why this is happening and how to fix it? Thank you! See the Pen OJMwEyb?editors=0010 by alnat2 (@alnat2) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 Share Posted August 20, 2020 Hey Alnat2 and welcome to the GreenSock forums. Can you please be more specific in your description of when things don't work? Is it that particular elements give you trouble? That after they're dragged to a certain position they stop working? That they don't work in certain browsers? Something else? Link to comment Share on other sites More sharing options...
Alnat2 Posted August 20, 2020 Author Share Posted August 20, 2020 Hi @ZachSaucier, I don’t know what it depends on, but from time to time the animation stops starting when you click on one card and drag on another. In this video onClick doesn`t work https://res.cloudinary.com/alnat2/video/upload/v1597931019/c-dragworks-clicknot.mp4 and onDrag doesn`t work https://res.cloudinary.com/alnat2/video/upload/v1597931019/c-clickwors-dragnot.mp4 After reloading the page, the problem disappears. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 Share Posted August 20, 2020 You've got a lot of code there. Please strip out all of the code for the non-chair markup, styling, and animations so that we can focus on one thing at a time (most likely if all have issues the core problem is the same). My first impression is that this is a logical issue based on your video. Link to comment Share on other sites More sharing options...
Alnat2 Posted August 21, 2020 Author Share Posted August 21, 2020 Only the code for the chair left Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 Thanks for cutting out the other code. The issue is logical in your code. You have two timelines (chair and chairArrow) that conflict. That's no good - you should stick to just one timeline for one effect. Additionally, your tween should target the element itself, not the draggable. Altogether it should look something like this: See the Pen gOrLKxp?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Alnat2 Posted August 21, 2020 Author Share Posted August 21, 2020 Zach, thanks a lot for the help, but what are these "jerks" in your version when I drag the handle? Here's a video https://res.cloudinary.com/alnat2/video/upload/v1598037241/jerks.mp4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 I think the jerks when the drag is between the min and the max are because of your ease on the translation of the element in the animation. So when you drag, it updates the progress of the tween, but the tween's progress at that point moves the drag position, hence the jerk. Set the ease to "none" for that part of the tween and it should fix it. The jerks outside of the min and max are probably because you can't tween to a negative progress or one over 1. I'd just remove your edgeResistance of 0.95. I made those changes in this demo: See the Pen MWybqwW?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Alnat2 Posted August 22, 2020 Author Share Posted August 22, 2020 And this little jerk, due to the work of the InertiaPlugin? Here`s a video https://res.cloudinary.com/alnat2/video/upload/v1598114097/topjerk.mp4 There is no jerks in my version. This is due to the fact that I used two timelines, isn't it? Link to comment Share on other sites More sharing options...
Alnat2 Posted August 24, 2020 Author Share Posted August 24, 2020 Without easing and snapping it looks unnatural ( Why is there no jerking in my version? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 The issue is that the starting y value was slightly different (non-zero). So just use a fromTo and it works better: function overlayAnim(el, dist, es) { let tl = gsap .timeline({ defaults: { ease: es, duration: 1 } }) .fromTo(el, {y: 0}, { y: dist, ease: "none" }); return tl; } 12 minutes ago, Alnat2 said: Why is there no jerking in my version? There are much more serious issues with your version Link to comment Share on other sites More sharing options...
Alnat2 Posted August 25, 2020 Author Share Posted August 25, 2020 Thanks Zach, now it works well. After reading a few old forum`s discussions about changing easing for reverse(), I wrote this code: onClick: function () { chair.reversed() ? chair.play() : chair.tweenTo(0, {onComplete: chair.reversed(true),ease:Bounce.easeOut}); Is this code ok? Or after GSAP3 release, it can be implemented more easily? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 25 minutes ago, Alnat2 said: Is this code ok? Or after GSAP3 release, it can be implemented more easily? It's the right way to do it. The only thing I'd do different is using the condensed string form for your ease: 'bounce'. Link to comment Share on other sites More sharing options...
Alnat2 Posted August 25, 2020 Author Share Posted August 25, 2020 Zach thanks for everything! 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