Jump to content
Search Community

Feasibility of using InertiaPlugin to snap to circular shape

kalaschnik test
Moderator Tag

Recommended Posts

Hey all,

 

I am super new to gsap. Before buying Club GreenSock, I would like to estimate if my specific use case can be covered with the inertia plugin.

 

My scenario:

I got shapes sitting in a "home" area. The user is required to categorize the shapes either in the center, middle or outer circle. If the shape gets droped on the SVG background they need hover back to the gray home area. If the shape gets dropped within on of the three circle areas the should align centered. Therefore, I thought it would make sense to create some "gravity-hooks" (see ids), which will be hidden later, but make sure the shape is centered on this line or circle (for the center)

 

 

I guess it is possible, but since I am dealing with no grid I was not sure how to tackle that issue.

 

See the Pen MWXzwGo?editors=1011 by Kalaschnik (@Kalaschnik) on CodePen

Link to comment
Share on other sites

Have you seen the .hitTest() function in the docs? https://greensock.com/docs/v3/Plugins/Draggable/static.hitTest() seems like good a place to start. 

 

I've also found this (old) pen, but it shows you what gets done when .hitTest() fails and the elements get animated to it's original position. (old syntax, but logic should still apply, be sure to update the syntax to v3 if you want to use this I've linked the migration guide below). Hope it helps and happy tweening! 

 

See the Pen XVxZpO?editors=0010 by verdond2 (@verdond2) on CodePen

 

  • Like 1
Link to comment
Share on other sites

If you want the elements to move to the closest gray ring upon release (if they're inside the areas), that would definitely involve some custom logic, probably determining the angle to the center, the distance from the center, and then check that against the thresholds for each section (radius range) and once you find a match, plot the x/y position by just taking the current angle and the radius to that gray line. Tween to those coordinates and you're golden. 

 

I hope that helps!

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