Jump to content
Search Community

Draggable`s onDrag&onClick strange behavior

Alnat2 test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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

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.
×
×
  • Create New...