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

What is Framer? Join the Community
Return to index
Gary Jacobs
Posted Mar 12 - Read on Facebook

Are there any example around of changing the revolution speed of an 'element'. Basically I'm trying to create this:

Square rotates once (0-360) speed = 1
if {
Square rotates 2nd time (0-360) speed = 1+1
Square rotates 3rd time (0-360) speed = 1+1+1
}

Etc...

I know it will be a loop of some sort but was hoping something like this already exists so I can take a look at the JS.

Cheers

6 Comments

Koen Bok

Hints: use the animation.on("end",... event to kick in the same animation with time original / counter.

Gary Jacobs

So obvious. Thanks Koen Bok

Koen Bok

Now, if you wanted to gradually accelerate rotation over time you could use a ease-in curve on a large rotation value over a long time.

Koen Bok

A or an ease in? Hmmm

Gary Jacobs

Yeah that could work. Basically my idea (and it's conceptual) is for the spinner icon that appears in the Dropbox icon when something is syncing. If the connection speed / upload speed is good the spinner will animate/rotate quickly and also slow down when the connection speed is poor. Thought it' a nice subtle visual to indicate how long a user would expect to wait.

Gary Jacobs

I got there in the end. Only tested it on a macbook, it's buggy on the 5s, but it works on the desktop browser.

http://www.fromtheloft.com.au/prototypes/spinner/index.html

Read the entire post on Facebook