Jump to content


Setting a Draggable's initial position

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

On an initial load, how would I go about centering the map on, say, Africa?


I've checked the documentation and looked at various threads, including this one, but those solutions do not seem to work for me. And if I translate with percentages, it moves the entire map to a relative position inside its container, creating a large gap.


I feel like I have to be missing something simple, but it's eluding me...

See the Pen d96c86c16fe45612bb019207c1eb3b7b by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

You should be able to set the initial draggable position using set() or you can even tween it to its starting position. Basic example:


See the Pen ZdKoNY by PointC (@PointC) on CodePen


Happy tweening.

  • Like 2
Link to comment
Share on other sites

Thank you for the reply, @PointC!


Unfortunately, that standard method seemingly does not work with the pen I linked, which is what caused me to create this thread to begin with. You can test it yourself by adding the following code to the pen above:


TweenMax.set(".draggable", {x: 125});


It makes no impact whatsoever on the position of the draggable element (the map). Nor does tweening it seem to have the proper effect.  Perhaps I'm not calling it at the right moment, or maybe I need to better understand the .update() method, as referenced here?


Either way, thank you again for trying to help.

Link to comment
Share on other sites

You'll need to set() it after your resizeBounds function is called because that's where you set the bounds.


TweenMax.set(".draggable", {x: 125}); 


As you have it coded now, that will have no effect because you have this tween in that resize function:


TweenLite.from(draggable.target, 0.3, {x:x, y:y});


That would immediately overwrite the set() tween. I just commented out that tween in the resize function so you can see that everything works.

See the Pen LKyraJ by PointC (@PointC) on CodePen


You could also used a delayed call for the initial set() if you need to keep that tween in the resize function. (I'm assuming you do, but didn't have time to look through everything in your code.)



Hopefully that helps. Happy tweening.


  • Like 3
Link to comment
Share on other sites

Yep, I'm a dumbass, as usual. ? I thought it wouldn't fit my use-case because it snaps back to the boundaries immediately in your example above when you try to drag it, but it turns out that's precisely the behavior I needed. Although I'm still not sure I understand the relationship that occurs when you offset it by a percentage, i.e.


{x: "-20%"}


It seems to offset everything, including the boundaries. Is that intended behavior?


Anyway, thank you for pointing out the error of my ways, @PointC! And doubly thank you for blowing my mind with .delayedCall()... I had no idea that even existed and it will no doubt come in very handy in the future.

Link to comment
Share on other sites

I'm not quite sure I follow the percentage question. Animating the (xPercent:-20) percentage like your example will be relative to the element itself. Are you wanting to animate (or set) it to 20% of the available screen width? If that's the case, you have the screenWidth variable available to you so you could do something like this.


See the Pen wLeqdP by PointC (@PointC) on CodePen


Does that help? Happy tweening.

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