Setting a Draggable's initial position

[SammyC123]

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

[PointC]

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.

[SammyC123]

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.

[PointC]

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

 

resizeBounds(true);
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.)

https://greensock.com/docs/TweenMax/static.delayedCall()

 

Hopefully that helps. Happy tweening.

 

[SammyC123]

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.

[PointC]

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.