Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alnat2

Draggable`s onDrag&onClick strange behavior

Recommended Posts

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 post
Share on other sites

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 post
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 post
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 post
Share on other sites

Only the code for the chair left

Link to post
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 post
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 post
Share on other sites

Without easing and snapping it looks unnatural ( 

Why is there no jerking in my version?

Link to post
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 post
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 post
Share on other sites
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 post
Share on other sites

 

Zach thanks for everything!

Link to post
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.

×