Jump to content
GreenSock

TartufoDAlba

Draggable: Using outside box to drag inside box

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 was wondering if it would be possible as per the example to:

1. Drag the .inner-box while using the "#outer-box" as a guide. Basically making it so the .inner-box is moved around by the same x,y that happens on the "#outer-box"

2. Keep the bounds where if the "#outer-box" when the ".inner-box" reaches the "#outer-box" bounds.

 

(To note: my pen is obviously off, and the "#outer-box" i am not trying to make drag around. Only ".inner-box" would drag around and stop when it has reached the edge of the "#outer-box")

 

The overall goal is to make ".inner-box" draggable even when you are not clicking directly on the div.

See the Pen BYxKWL by tartufodalba (@tartufodalba) on CodePen

Link to comment
Share on other sites

I'm not sure I understood your goal, but it sounds like you just need to set the trigger to be the outer-box, like this: 

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

 

Is that what you were looking for? 

  • Like 3
Link to comment
Share on other sites

25 minutes ago, GreenSock said:

I'm not sure I understood your goal, but it sounds like you just need to set the trigger to be the outer-box, like this: 

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

 

Is that what you were looking for? 

 

Yep that is it! I managed to glance over the trigger info in the docs. Simple and clean, thank you!

  • Like 1
Link to comment
Share on other sites

No problem. Happy to help. Isn't it nice when there's a solution that involves less than half the code you had previously? :)

 

Happy tweening/dragging 

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