Spring, Mass, and Motion

As a developer who's been extensively using Framer Motion for the past few months, I've fallen in love with its spring animations. It's a beautiful marriage of my two passions: physics and programming.

While implementing these animations across various UI components in my projects, I noticed that many developers, including myself initially, weren't fully aware of what parameters like mass, stiffness, and damping actually meant.

Thanks to my interest in physics, I can help demystify these concepts and show how the principles I learned back in school create these smooth, natural-looking animations.

Hooke's Law: The Science of Springs

At its core, a spring animation follows the physics of what scientists call a Harmonic Oscillator. Don't let this term intimidate you – it's simpler than it sounds!

Back in school, we defined a Harmonic Oscillator like this:

A Harmonic Oscillator is a system that oscillates with a sinusoidal motion. In the context of a spring, this means that the spring will oscillate back and forth around its equilibrium position.

The motion of a spring can be described by the following equation:

$F = -k \times x$

This is the basic principle of a spring animation.

But wait, there’s more. Do you remember the three laws of motion?

Newton's 2nd law of motion states that

The acceleration of an object is directly proportional to the net force acting on it and inversely proportional to its mass.

$i.e. \;\; F = m \times a$

By combining these two formulas, we get:

$m \times a = -k \times x$

Rearranging the equation, we get the acceleration:

$\Rightarrow a = -\frac{k \times x}{m}$

i.e.

acceleration ($a$) = $-\frac{\text{stiffness} \times \text{displacement}}{\text{mass}}$

This means the spring's acceleration depends on its stiffness, displacement, and mass. From acceleration, we can figure out:

• Velocity ($v$): How fast the object is moving.
• Position ($p$): Where the object is at any point in time.

Wondering how? See if you can think of an answer, before scrolling further...

Kinematics!

While Newton's 2nd law gives us the cause of acceleration (force), kinematic equations like $v = u + a \times t$ tell us how velocity and position change as a result.

$v = u + a \times t$

and similarly,

$p = p_0 + v \times t$

In both of the above equations, $t$ is the time interval between frames, which in the world of frontend animations is tied to the frame rate. For Framer Motion, this is typically 60 frames per second,

so $t = \frac{1} {60}$ or roughly 0.01666 seconds.

Let's see how these physics equations translate into code.

Here's a function that calculates object positions over time based on spring motion:

To make this interactive, I’ve created a playground below where you can experiment with the spring animation parameters. Adjust the mass and stiffness, to observe how the animation changes in real-time : )

This actually, makes perfect sense from a physics perspective. In real life, In the real world, springs don’t just stop. They keep moving,subtly, endlessly until something slows them down or i.e. the energy dissipates.

However, in real life, the energy dissipates due to friction. In Framer Motion, we don’t have friction, so the animation never stops.

In order to simulate friction,

we need to add damping to the spring.

Damping is a force that opposes the motion of an object. In the context of a spring, it means that the spring will lose energy over time and eventually stop oscillating.

The formula for damping is:

$F = -b \times v$

Taking this into account, our total force equation becomes:

$F = F_{spring} + F_{damping}$

$\Rightarrow F = -k \times x - b \times v$

This means that the acceleration equation becomes:

$a = \frac{-k \times x - b \times v}{m}$

Let’s make these changes in our code:

Let's add another control damping to our playground and update the calculateSpringMotion function.

This is reflected in the chart, where the motion converges toward a final “resting position.”

By increasing the damping slider to a higher value, you’ll notice that the object reaches this “resting position” much faster compared to when the damping value is lower.

In Motion (formerly framer-motion), these physics principles are abstracted away, but understanding them helps in creating better animations.

Here’s an example of different states in a dynamic island component (credits to Emil Kowalski) just to give you a sense of what you can do with these physics principles :)

import { useMemo, useState } from "react";
import { motion } from "motion/react";

import { Ring } from "./ring";
import { Timer } from "./timer";

export default function DynamicIsland() {

// State
const [view, setView] = useState("idle");

const content = useMemo(() => {
switch (view) {
  case "ring":
    return <Ring />;
  case "timer":
    return <Timer />;
  case "idle":
    return <div className="h-7" />;
}
}, [view]);

return (
<div className="h-screen flex flex-col items-center justify-center p-4">
<div className="flex h-[100px] justify-center">
  <motion.div
    layout
    style={{ borderRadius: 9999 }}
    className="h-fit min-w-[100px] overflow-hidden bg-black"
  >
    {content}
  </motion.div>
</div>
<div className="flex justify-center gap-4">
  <button
    type="button"
    className="rounded-full w-16 h-10 bg-white px-2.5 py-1.5 text-sm font-medium text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
    onClick={() => setView("idle")}
  >
    Idle
  </button>
  <button
    type="button"
    className="rounded-full w-16 h-10 bg-white px-2.5 py-1.5 text-sm font-medium text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
    onClick={() => setView("ring")}
  >
    Ring
  </button>
  <button
    type="button"
    className="rounded-full w-16 h-10 bg-white px-2.5 py-1.5 text-sm font-medium text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
    onClick={() => setView("timer")}
  >
    Timer
  </button>
</div>
</div>
); }

The default values in Motion (formely framer-motion) stiffness: 100, damping: 10, mass: 1 work well for most cases, but now that you understand what each parameter does, you can fine-tune them to achieve exactly the animation feel you’re looking for ✨

I hope this helps you understand the physics behind spring animations and how you can use it to create better animations.