How to slow down Framer animations

660 Views Asked by At

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.

2

There are 2 best solutions below

1
On BEST ANSWER

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.

0
On

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