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

What is Framer? Join the Community
Return to index
Karol Piwowarczyk
Posted Nov 14 - Read on Facebook

Hi! I have one question for you.
How can I animate red ball on the specific path (circle in this case).

For example ref ball have to close path in 10 second.

Thanks for help!

4 Comments

Sergey Voronov

u can use power of math:) like in this module for example https://github.com/mamezito/moveWithArc-FramerJS-module

Oskar Lewicki

Maybe this example will be usefull for you: http://share.framerjs.com/mpj7ig3y1q19/

Joni El

#with some trigonometry

R = 100
ox = R
oy = R
angle = 0
angleIncrement = 5

bigCircle = new Layer
x: Align.center()
y: Align.center()
borderRadius: 100
borderWidth: 1
backgroundColor: null
size: 2 * R

smallCircle = new Layer
parent: bigCircle
backgroundColor: "red"
size: 30
borderRadius: 100

myInterval = Utils.interval .1, ->
smallCircle.x = ox + Math.cos(angle * Math.PI / 180) * R - smallCircle.width / 2
smallCircle.y = oy + Math.sin(angle * Math.PI / 180) * R - smallCircle.width / 2
angle += angleIncrement

Joni El

The next step would be to fit the full rotation in 10s. Here is the solution: https://framer.cloud/ijhMm

Read the entire post on Facebook