Jump to content
Search Community

Draggable define circle bound

mniemann test
Moderator Tag

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

Hi guys,

 

this is my first forum post, so first of all I would like to thank the creators of greensock for saving me so much time and congratulate you for this awesome product. Chapeau!

 

In my current project I would like to define a circle bound on a draggable object, without losing the throw-props nor the edge-resistence feature, etc.

 

Is there an easy way to do so?

 

Warm regards

Max

Link to comment
Share on other sites

  • 8 months later...
  • 3 weeks later...

The key to doing this is to make sure that the distance from any point on your element to the center of the circle is not greater than the radius of the circle. If a point exceeds that distance, it is outside the bounds of the circle.

 

When this happens, you need to find the angle of that point, and then calculate the cos/sin to find the x/y point at that angle using the radius as the length. If the point that is outside the bounds is not the top/left corner, then you're going to have to do another calculation to find the offset.

 

Here's a demo of something I've been working on. Not only are the circular bounds working with different shaped polygons while dragging, but you can also throw them around and they will bounce+rotate off the bounds.

 

Use Chrome to view.

See the Pen Qbgyoq by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Thanks!

 

One problem I had creating this and some other Draggable stuff in the past is that the snapping functions are only passed one value at time. But to figure out where something is, you need to know the x and y values. To work around this you can update its position in the onDrag callback, but this can cause problems if you're not careful, like x/y values not matching up with the actual transforms on the element.

 

It would be nice if there was a way to change what gets passed and returned in a snapping function. I think the easiest way to do this without changing the API up too much, would be to just pass in both the x/y values, and then the function can return a number or an object with the x/y values. Off course it would only do that if the Draggable type is "x,y". What do you think?

Link to comment
Share on other sites

Hey Blake, sorry for the tardy response (swamped lately). Anyway, yes, I totally see why that'd be useful (having both x and y values fed to the function) but it's a bit tricky to implement because [ironically enough] the flexibility of the tools (ThrowPropsPlugin in particular). It doesn't assume that only x and y can be used - ThrowPropsPlugin (and its snapping) can be used for ANY property of ANY object. If it only accommodated x/y, it'd be simpler. Heck, it can do 50 different properties simultaneously if you wanted. Each is handled independently. So it's non-trivial to just tell it to combine two specific ones, feed those to the snap function, etc. 

 

That being said, I'll definitely keep this in mind for a future enhancement. I may be able to figure out an elegant way to pull it off. If you need it urgently for a particular project, let me know. 

Link to comment
Share on other sites

  • 7 months later...
 

I'm currently in need for something like this for a project. I have a few draggables that are not allowed to touch eachother, and i thought to achieve this by using the snap-functionality. But i have the same problem: the function does not get both x and y passed through. Or are there other ways to achieve what i want?

Link to comment
Share on other sites

This is still an issue. To work around it, you can run your snap logic inside your onDrag* callbacks and call this.update() if you move the draggable. It's not perfect, and if you are using throwProps, it gets a little more complicated as you might need to manually create the throw tweens.

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