Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
joris-rotteveel

Animate Draggable and respect container

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

 

  • Like 2
  • Thanks 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.
×