Animation curves

We use curves to have our animations feel more natural, to make our layers behave like real-life objects.

Up until now we mostly used the default curve: Bezier.ease.

There is one curve (well, it’s more a line in this case) that lets an animation run at the same speed all the time: ‘linear’. A linear animation looks very unnatural, so in general, you’ll use the easings or a spring curve.

Possible curves

There are four built-in easing curves. An ease-in will start slowly and then pick up more speed; ease-out, on the other hand, will start quicker but slow down at the end. The default curve, ease, has a bit of both, although it slows down more aggressively than it speeds up. The last option, ease-in-out, decelerates as fast as it accelerates.

You’re not limited to these four Bézier curves, though; you can define custom Bézier curves.

And then there are the spring curves. They add a bounce to the animation by simulating a physical spring.

You can see how the easings, a custom Bézier curve and a spring curve compare to always-the-same-speed linear in this example project:

By the way, to change the default curve for all animations in a project you can always set the Animation defaults.

Spring curves

Spring curves are bouncy. You could imagine a spring curve like a real spring attached to an object (or your layer) that tries to pull it in place.

There are two kinds of spring curves in Framer, there’s the default spring, but in older projects you might still come across the classic spring.

The default spring is the one you can set in Auto-Code, and is by far the most convenient to use. It lets you set the time of the animation, and you only need to change its ‘damping’ to tweak its bounciness.

The classic spring, on the other hand, will simply ignore the time you chose.

Here’s how you use it:

options:
    time: 1
    curve: Spring(damping:0.5)

A damping of 0 will give a lot of bounce, and 1 (the maximum value) no bouncing at all.

Damping ratio, mass, and velocity

In addition to this damping ratio, you can set two more properties.

options:
    time: 1
    curve: Spring(damping:0.5, mass:1, velocity:0)

I got unexpected results when changing velocity, like, e.g., animations that never stopped. It might have been a problem in the current version of Framer though; your mileage may vary.

Pro tip: You can just write curve: Spring to get the default damping of 0.5 (and mass of 1, and no velocity).

Classic spring curves

Know that any time you may have set will be ignored when using this spring curve.

You tweak how this curve behaves (so also the duration of the animation) by setting its ‘tension’ and ‘friction.’ These two define the physical properties of the simulated spring.

options:
    curve: Spring(tension:250, friction:25)

It’s advisable to use a tension that’s about ten times the friction.

In short:

• High tension + Low friction:
  The animation will move fast and oscillate many times before coming to a stop.
  
  
• Low tension + High friction:
  The animation will move slower and oscillate less.

Tension, friction, velocity, and tolerance

But there are a few more optional parameters with which you can play:

options:
    curve: Spring(tension:250, friction:25, velocity:0, tolerance:0.0001)

Alternative notation

In some projects you might come across this older "string" notation for the classic spring:

options:
    curve: "spring( 250, 25, 0 )"

The first value (250) is ‘tension,’ then there’s ‘friction’ (25), and the last one is ‘velocity.’ (It’s not common, but there might be a fourth number for ‘tolerance.’)

In this notation you can also solely write curve: "spring" to get one with the default values: a tension of 250 and friction of 25.

Custom Bézier curves

The presets Bezier.easeIn, Bezier.easeOut, Bezier.ease, Bezier.easeInOut, and even Bezier.linear are defined just like the Bézier curves in a vector drawing program.

You can also create your own Bézier curves. This one, for example, will behave the same as the ease-in-out curve:

options:
    time: 1
    curve: Bezier(.42,0,.58,1)

The first two numbers describe the start, and the last two the end of the curve.

There’s a website, cubic-bezier.com, where you can tweak a curve until it feels right and then copy the number values. I made this ‘Speedy Gonzales’ curve, for example.

To get an idea of the possibilities you can check the many example curves on easings.net.