Since I started working with Framer, my design process has been invaded by Spring Animation. I used to use the Easing Function to set up the physical changes in my animations, but after using it for a while, it has mostly replaced it in my animations. Considering that there are few explanations of elastic animation on the web, I'll write a post about it.

Old friend, Easing function

When I design animations I often need to adjust the speed of playback during the execution of the animation, for example for inertial effects, and the easing function is very good at helping me to do this. Easing curves define the relationship between parameters (position, size, angle, etc.) as a function of time during the execution of an animation, using a Bézier curve. Common animation functions such as EaseIn and EaseOut are all part of the Bézier curve, while more subtle Bézier functions can be set in some UI or after effects software.

Now, Spring animation

The movement pattern of an object in the real world is not as ideal as an easing function. Due to physical factors such as inertia, acceleration and gravity, we need an animation pattern that is close to the real physics to create a natural animation.

To use spring animation in the Framer, simply select 'Spring' in the Transition Effects panel or add 'type' to 'spring' in the code.

Framer offers two ways to set up spring animations: physics-based animations and time-based animations.

Physics-based animation

Physics-based animation consists of three main parameters: stiffness, damping and mass, which determine what kind of animation effect we see.

Spring animation involves Hooke's law and Newton's second law in physics, where people use formulas and known parameters to design spring animations in computers. If you are interested in the derivation process, please refer to the references at the end.

stiffness

The stiffness is understood as the elastic strength of the element. The greater the value, the greater the elasticity of the object when it recovers from deformation, holding all other parameters constant.

transition={ type:"spring", 
  damping: 10
  // stiffness: 100 // default stiffness value.
}}

When only damping is set in the code, stiffness will be set at the default value of 100.

damping

Damping is the resistance to the movement of an element. Due to the stiffness, the object will oscillate repeatedly around the target position. In order to stop the object, we need resistance to bring it gradually to equilibrium. This means that the greater the resistance the faster the object will stop moving and the shorter the animation time.

transition={ type:"spring", 
  stiffness: 100
  // damping: 10 // default damping value.
}}

When only stiffness is set in the code, damping will be set with a default value of 10.

mass

Mass is similar to the physical rules of our real world.

When an object is not disturbed by external forces (external forces remain constant), the greater the mass of the object, the less likely it is to change its state of motion. Therefore, the greater the mass of an object, the greater its inertia (from a high school textbook).

In short, if we hold rigidity and resistance constant, the larger the mass, the bulkier the motion of the element, and the smaller the mass, the lighter the motion of the element.

Generally speaking, I have designed flat UI elements in the Framer, so I can just adjust the stiffness and resistance to achieve the desired animation effect. Now, let's try the following prototype to see how the different parameters affect the animation.

Although the length of the animation cannot be set precisely, the uncertainty of the animation provides a more realistic visual experience of screen interaction. In addition, Framer also offers a time-based approach to setting spring animation.

Time-based animation

To use time-based animation, simply set the bounce duration of the element.

Currently, you can only use time-based animation effects in code.

bounce

The flexibility can be set between 0 and 1. When duration is set, bounce is set with a default value of 0.25.

transition={ type:"spring", 
  duration: 100
  // bounce: 0.25 // default bounce value.
}}

duration

This parameter is the same as the easing function and sets the duration of the animation.

Note that

When one or more of stiffness, damping, mass are present, bounce and duration will be disabled. My guess is that Framer is using bounce and duration to calculate the values of the other three parameters.

Other parameters

In addition, Framer provides several additional parameters to allow us to adjust the state of the animation. These parameters are only used in special circumstances and are currently only available in code, so here is a brief explanation for reference.

- velocity: The initial velocity of the animation. If a larger value is set for **velocity**, then the element will have a oscillating effect when it appears (goes into its initial state).

- restSpeed: ends the animation when the speed of the animation falls below this value. Framer provides an 'in units per second' measure of animation speed, with a default value of 0.01.

- restDelta: Similar to restSpeed, except that the animation ends when the "distance" is less than this value. The calculation of "distance" is not yet known.

If you are interested in restSpeed and restDelta, it is recommended that you speak to the officials directly for a detailed explanation as it seems that careful calculations are required when using them.

Lastly

Here are two effects that have been created using elastic animation, the button entry effect and the sidebar pop-up effect.

I once struggled with how to design a natural curve when using a jogging function. Although many websites offer visual design tools for functions, after several parameter adjustments, the animation was still not as good as it could be (perhaps due to my OCD). The spring animation has eased my compulsion to a large extent, and at least now, no matter how I tweak the parameters, the final result still looks very comfortable.

Reference

The physics behind spring animations

CSS如何实现弹簧动画效果

A Friendly Introduction to Spring Physics