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:
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.
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.
|The layer will move at a constant speed.|
|Starts slowly and picks up speed. Like a car driving off.|
|Slows down before stopping, as if the car ran out of gas.|
|This is the default curve. It’s like |
|Picks up speed at the start, and slows down at the end.|
|A custom Bézier curve.|
And then there are the spring curves. They add a bounce to the animation by simulating a physical spring.
|A spring curve with the default damping of 0.5.|
|A spring curve with more damping: 0.7.|
|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:
By the way, to change the default curve for all animations in a project you can always set the Animation defaults.
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.
In addition to this damping ratio, you can set two more properties.
options: time: 1 curve: Spring(damping:0.5, mass:1, velocity:0)
|Damping||The strength of the spring.|
|Mass||(Optional) The heaviness of the object. The default value is |
|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).
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.
- 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.
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)
|Tension||The strength of the spring.|
|Friction||How hard it is for the spring to move the object. The weight of the object.|
|Velocity||(Optional) The initial speed of the object. Default: |
|Tolerance||(Optional) Minimal threshold before the animation ends. Default: |
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.
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.
To get an idea of the possibilities you can check the many example curves on easings.net.