Jump to content
GreenSock

Tread

Draggable "jumping" after being tweened

Go to solution Solved by Tread,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,

 

 

Love GSAP so far. Great job with it!

 

 

Having an issue where if you throw a lockAxis draggable horizontally, interrupt the throw with a vertical drag, and while you're dragging vertically, have it tweened horizontally.

 

(Don't let go of the vertical drag, yet.) When the horizontal tween completes, the next pixel you vertically drag will jump by the vertical distance you dragged it while the tween was running. (I think that's the distance it jumps.)

 

 

I've found a hacky workaround to deal with this (by offsetting elements by the jumped distance), but would like to properly handle dragging and tweening the same object.

 

Draggable.update() in the onUpdate event of the tween makes things really nutty.

 

See the Pen QNwKXz by trenthm (@trenthm) on CodePen

Edited by Tread
  • Like 1
Link to comment
Share on other sites

Hi and welcome to the forums,

 

Thanks for creating a demo and for providing the clear explanation.

Although I do not write the code I'm fairly confident that tweening an element on the opposite axis from which its being dragged was not something that was considered for Draggable to handle. I'm sure you can understand that although you may need this functionality for your specific usage it isn't something that the majority of users would expect or need. I wouldn't consider it a bug but something that we may consider as a future feature.

 

Although it may be possible to add such a feature (I really don't know) the challenge we face is keeping the codebase as lean and lightweight as possible while serving the needs of the majority of users. 

 

We will study the demo a bit and if there is a non-hacky solution we can find that would be easier for you to implement on your end, we'll let you know. I'm certainly open to suggestions but at the moment am not entirely sure how it would work. Both your Draggable and the tween are fighting for control over a css transform matrix (that contains both x and y translations) so I'm not optimistic about a clean workaround.

Link to comment
Share on other sites

Oh, wow. Just realized that you don't need to throw it first!

 

You can see the issue by just dragging vertically until after tween completes.

Link to comment
Share on other sites

Thanks for the response, Carl.

 

If you guys come up with any solution, it'd be much appreciated.

 

Just getting the tween to work with draggable felt a bit like a magic trick, so I knew that things were getting hacky.

 

Originally, I had multiple draggable instances, one big div with type: "x", and an inner div with type: "y". I just couldn't get it to feel right.

 

Can you think of any way to duplicate the lock axis behavior, using two draggable instances (same idea as described in the line above)? Then, I'd have granular control, and could disable/enable each draggable as I pleased, keeping things clean.

Link to comment
Share on other sites

  • Solution

Decided that I would try a go at nested draggables one more time... And it worked!

 

It's not so hacky this round.

 

Container div with draggable type: "x,y"and an inner div with draggable type: "y". 

 

Then, on the container, include this:

onLockAxis: function (e) {
        if (this.lockedAxis === "x") {
            this.endDrag(e);
        } else {
            innerDraggable.disable();
        }
},
onRelease: function () {
    if (this.getDirection() === "right" || this.getDirection() === "left") {
        innerDraggable.enable();
    }
}
 

This allows me to figure out which way the user is dragging (via lockedAxis) and do with it whatever is needed.

 

If the container was just type: "x", then the two draggables together would act like a single type: "x,y". I want them to act like a single lockAxis draggable, but with extra-granular control over their motion.

 

 

Coincidentally, this arrangement doesn't require tweening the draggable like I needed to before. (Bonus)

 

 

Thanks, again, for the response Carl. Inspired me to give it another go from scratch!

  • Like 2
Link to comment
Share on other sites

Sorry, I had to step away for a few hours. 

Very excited to hear you found a solution. From what I can tell nesting Draggable's is a solid approach and I'm glad you got it working. 

Also, thanks for posting the solution. Great stuff!

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.
×