This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Andrew Tang
Posted Apr 05 - Read on Facebook

Howdy all,
I’m a total noob and I’m trying to figure out how to drag circle elements along a circular arc (clockwise + anti), however I’ve searched high and low on how to do this and haven’t seen any examples yet. Can anyone point me in a direction where I could learn this?

In this example, I’m trying to drag the colourful circles along the grey circle/arc. What I’m trying to do, is replicate the Linum iOS app if anyone’s played with that.

Any help / point in the right direction would be very much appreciated!

3 Comments

Ian McClure

It is a bit complicated.

I am not sure if this will work on a drag event, you might need to tie it to a different touch event. Lets say onDrag works; on each call of the event—so, onDrag -> — you'll need to:

1. grab event.point and event.previous (the touch's current and previous locations)
2. convert those values to radians
3. subtract them to find the difference in the angle between the two

then for each circle:
1. grab the x and y coordinates
2. convert them to radians
3. add the difference in angles that you found earlier to each of the circles' theta value
4. convert the new location in radians back to cartesian coordinates

to go from cartesian coordinates to radians it is:
Math.atan2(x, y) -> returns theta

to go from radians to cartesian coordinates for a clockwise motion:
x = Math.cos(theta) * radius
y = Math.sin(theta) * radius

for counter-clockwise motion:
x = Math.sin(theta) * radius
y = Math.cos(theta) * radius

As another note, Sine and Cosine go from 0 to 2π. I don't know how important that'll be for you but I had issues because of that on a project.

Andrew Tang

Thanks for the response Ian, it's given me a bit to think about. Cheers

Sergey Voronov

here is a module i wrote that can help you https://github.com/mamezito/dragOnCircleFramerJS

Read the entire post on Facebook