How to slow down Framer animations

Question

I'm looking for a solution to slow down FramerJS animations by a certain amplitude.

In the Velocity Animation framework it's posible to do Velocity.mock = 10, to slow down everything by a factor of 10.

Either the docs are lacking in the respect, or this feature doesn't currently exist and should really be implemented.

score 3 · Accepted Answer · answered Oct 21 '15 at 07:49

3

You can use

Framer.Loop.delta = 1 / 120

to slow down all the animations by a factor of 2. The default value is 1 / 60.

answered Oct 21 '15 at 07:49

Javier Chávarri

1,605
11
21

Just wanna add that it doesn't affect any Utils.delay calls that you may have in your code, affects animations ONLY – L A Oct 14 '16 at 22:02

score 1 · Answer 2 · answered May 31 '16 at 16:52

While Javier's answer works for most animations, it doesn't apply to delays. While not ideal, the method I've adopted is to set up a debugging variable and function, and pass every time-related value through it:

slowdown = 5
s = (ms) ->
  return ms * slowdown

Then use it like so:

Framer.Defaults.Animation =
  time: s 0.3

…and:

Utils.delay s(0.3), ->
  myLayer.sendToBack()

Setting the slowdown variable to 1 will use your standard timing (anything times 1 is itself).

How to slow down Framer animations

2 Answers2