Jump to content
Search Community

Manually setting position of object dragged using Draggable

SCCOTTT test
Moderator Tag

Go to solution Solved by GreenSock,

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

I've got an object that I've made draggable using GSAP Draggable. What I'm wanting to do is basically reset the position after the object is dragged (i.e., as soon as you let go of the object, it jumps back to where it was before the drag started).

 

It looks like Draggable is moving the object using transform: translate3d(x, y, z). So, I've tried to reset those values using jQuery by doing the following:

var drag = Draggable.create($dragger, {
	type: "x,y",
	onDragEnd: function(e) {
		$dragger.css({
			transform: "translate3d(0px, 0px, 0px)"
		})
	},
});

It works, up until I try dragging the object again. Seems like Draggable remembers where it was last dragged/dropped, ignores the translate3d position I manually set, and starts the drag where it left off last time.

 

Is there a better way to do this? Perhaps a way to simply set the position of an object using GSAP code? Or a way to get Draggable to forget the position it was in on the last drag and reset?

 

I thought about using TweenLite/TweenMax to set the position w/ 0 duration, but that seems like an ugly solution. Any ideas?

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

Link to comment
Share on other sites

  • Solution

Yep, GSAP automatically keeps track of the various transform components under the hood (well, actually in a _gsTransform object attached to the element itself) so that:

  1. It can be super-fast (performance)
  2. It can independently control each component across as many tweens as you want, and regardless of staggered timing (impossible with CSS).

So I'd strongly recommend always setting your transforms through GSAP so that it can keep everything accurate for you. In your case, instead of using jQuery to set the transform, you could simply do this:

var drag = Draggable.create($dragger, {
    type: "x,y",
    onDragEnd: function(e) {
        TweenLite.set(this.target, {x:0, y:0});
    }
});

You could easily turn that set() into a to() and add a little duration to it if you want so that it nicely transitions/animates back to the original position. 

  • Like 3
Link to comment
Share on other sites

Yes, x and y are just shortcuts for translateX and translateY. By default, GSAP will use 3D transforms during a tween, and switch to 2D at the end if possible to optimize memory usage and ensure things render crisply. You can add force3D:true if you want it to always use 3D on that element even after the tween/set is done.

  • Like 1
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...