Framer Classic » Animation » Animation curves

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.

Bézier curves
Bezier.linearThe layer will move at a constant speed.
Bezier.easeInStarts slowly and picks up speed. Like a car driving off.
Bezier.easeOutSlows down before stopping, as if the car ran out of gas.
Bezier.easeThis is the default curve. It’s like ease-out, but slows down more abruptly and has a slight ease-in.
Bezier.easeInOutPicks up speed at the start, and slows down at the end.
Bezier(1,0,0,1)A custom Bézier curve.

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

Spring curves
SpringA spring curve with the default damping of 0.5.
Spring(damping: 0.7)A spring curve with more damping: 0.7.
Spring(tension: 250, friction: 25)A ‘classic’ spring curve with 250 tension and 25 friction.

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:

The different easing curves, a custom Bézier curve, and the default Spring curve
Download Framer 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.

Tweaking the different spring curves. Click the code to copy it
Download Framer project

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.

Default spring curve options in the Properties Panel

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)
DampingThe strength of the spring.
Mass(Optional) The heaviness of the object. The default value is 1, which is also the minimum you should use. (Making it lower than one will change the duration of the animation.)
Velocity(Optional) The initial speed of the object.

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)
TensionThe strength of the spring.
FrictionHow hard it is for the spring to move the object. The weight of the object.
Velocity(Optional) The initial speed of the object. Default: 0
Tolerance(Optional) Minimal threshold before the animation ends. Default: 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.


Leave a Reply