Animate Draggable and respect container

[joris-rotteveel]

Hi guys,

 

is it possible to animate a Draggable with a tween and still respect it's container bounds?

When dragging the red rectangle, you can't drag it past the grey boundary. But if I am tweening it, how would I make it respect those boundaries? Is there an API call I need to do, or would I manually need to check wether the new x-position is outside the boundaries?

 

Ideally I'd like to be able to animate it outside the boundaries, but once complete it would react like when you stop dragging , it animates back within it's bounds.

 

 

Cheers

See the Pen YzPbJxw by joris-rotteveel (@joris-rotteveel) on CodePen

[GreenSock]

You can trigger update() and use the "applyBounds" parameter to force it to calculate the bounds and then tap into the Draggable's maxX/minX properties like this: 

 

See the Pen 46a7b1271bea7f408d1b54565c1cc96b?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I put an outline around the proxy too so that you could see what's going on. The way you've got it set up isn't quite lined up, FYI. 

 

If you want it to be able to animate outside the bounds and then animate back to within the bounds, that's also totally doable - you could just use an onComplete to run some logic and if it's outside the min/max, just animate it back. 

 

Does that help? 

[OSUblake]

3 hours ago, joris-rotteveel said:

is it possible to animate a Draggable with a tween and still respect it's container bounds?

 

Tweens don't know anything about what is draggable, so you would have to do that yourself.

 

You can use getBoundingClientRect(). Run that on both elements to determine if the draggable is out bounds. If it is, then animate it back in bounds.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

[joris-rotteveel]

 

 

Thanks Jack and Blake!