Jump to content
Search Community

Draggable - Issues when quickly dragging with the mouse

Paul D test
Moderator Tag

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

Hi gang,


Insert standard gushy comments about how great Greensock is...(cos it really is THAT good)


I'm hoping there's something I've overlooked or that there's a quick and easy fix for what I'm seeing....


In my site I've encountered an issue with very quickly dragging objects with the mouse (in my limited test I don't think it was as much an issue on touch devices)


onDragEnd I'd like to sometimes tween the dragged item back to it's original position (dependent on certain conditions) which works fine on most tests.  However I noticed than when very quickly dragging and releasing it would sometimes get "stuck" on the release of the mouse and not tween back to it's original position. Using Developer Tools I could see that when this happens a style such as:

transform:matrix(1, 0, 0, 1, -297, 14)

or sometimes (not sure why it's different at times?)

translate3d(-297px, 14px, 0px) 

is still applied to the draggable even though I've set a tween of x and y back to 0 (using a Draggable setup of type:"x,y").


A minimal version of the issue can be seen on this Codepen: in which all I'm trying to do onDragEnd is :

TweenMax.set(e.target, {clearProps:"transform"});

but this seems to be ignored when dragging too quickly and I'm left with the translate/matrix still applied.  Perhaps there's another draggable setting I need to use or another event like onRelease needs to be utlised?


Any pointers would be most appreciated.


Thanks all.


See the Pen GlHLa by anon (@anon) on CodePen

Link to comment
Share on other sites

The problem is that you're targeting "e.target" which is the original event's target, and that could be something other than your Draggable's target. For example, if you drag super fast so that your mouse actually moves off of the element and then release before the browser issues the next requestAnimationFrame, the target of the event may be the <body> or whatever element you're over at that moment. 


The solution is to simply change "e.target" to "this.target" ("this" refers to the Draggable instance in the context of an onDragEnd). 


This isn't a bug or anything - as far as I can tell Draggable is doing exactly what it should. And keep in mind that we purposefully tie Draggable updates to requestAnimationFrame rather than onmousemove or ontouchmove because those may fire many times inbetween "ticks" which would negatively impact performance. This is what all the performance gurus recommend as well (it's often called debouncing).


Happy tweening....er...dragging!

  • Like 3
Link to comment
Share on other sites

Hey Jack.


I JUST figured that out after re-reading the docs and realised that was my mistake and was coming back here to edit my post.


But then you were already here :)


Thanks so much Jack - the support here is amazing.




PS. Pretty bloody slack of you to take all of 2 hours to respond!

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