- Scene
- 09
- Take
- 01
- Level
- Intermediate
- Runtime
- ~3 h
Springs and Physics
Motion that follows a rule instead of a recording: springs, damping, interruption, drag and throw, ending with a cart drawer you can fling shut.
Until now every animation was a recording: a duration and a curve, played from start to end. A spring is a rule instead. At every moment it asks two questions, where am I and how fast am I going, and pushes toward the target accordingly. That is why springs survive interruption, and why design systems such as Material 3 have moved to them.
You meet the spring's three numbers and the ratio that decides whether it bounces, write a spring in a short JavaScript file and learn what breaks it. Then come Motion's duration and bounce options, springs inside CSS with linear(), and drag, throw and rubber banding.
The build is the cart drawer: a spring opens it, you can fling it shut, and it fades for anyone who asks for less motion.
▶ Roll: 9.1Scene 09 · the brief from Lumen
Mei, motion designer at Lumen Bikes
“The cart should feel like a drawer on a good runner: open it, and it arrives. Swipe it away, and it leaves the way your hand sent it.”
Mei has been prototyping the cart in a design tool with a spring curve, and she keeps saying the same sentence: "It has to carry the speed of your finger." Kofi tried a 400 ms transition. It looked fine until Lena tapped the cart button twice. The drawer stopped dead, turned round and shot back out, and everyone in the room winced.
Ravi found a second problem. The first version slid in with a bounce, and the bounce was the part that made him dizzy. He asked for two things: the bounce must be small and calm, and with reduced motion the drawer must simply fade.
In this phase you build the spring Mei describes and use it for the drawer. By the end the cart opens with a spring, can be thrown shut with a flick, turns round mid-flight at the speed it has, closes with a button or Escape, and fades for people who ask for less motion.
In this scene
You will learn
- Say what stiffness, damping and mass do, and read the damping ratio
- Write a spring in JavaScript with a fixed step and rest thresholds
- Use Motion's bounce and visualDuration, and sample a spring into CSS linear()
- Handle drag, throw and rubber banding with pointer events
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page
Files you touch
- src/js/motion/spring.js
- src/js/components/drawer.js
- index.html
- src/styles/components.css
- src/js/main.js
Shot list · 7 shots, widths by reading time
- 9.1The Spring ModelA spring pulls toward a target harder the farther away it is, and damping takes energy out. Three numbers (stiffness, damping, mass) and one ratio, the damping ratio, say how it will move. 19 min 1 live
- 9.2A Spring by Hand in JavaScriptA spring is a loop: work out the pull, change the speed, move, repeat. A fixed small time step keeps it stable, and rest thresholds say when to stop. 31 min 3 live
- 9.3Duration-Based SpringsDesigners think in "about a third of a second, a little bounce", not in stiffness and damping. Motion's
visualDurationandbounceconvert that into real spring physics. 19 min 3 live - 9.4Interruption and Velocity Hand-OffWhen you send a moving spring somewhere new, it keeps its position and its speed and turns round smoothly. A CSS transition begins a new curve with a speed of its own. 28 min 2 live
- 9.5Springs in CSS with linear()Sample a spring into a list of numbers and CSS
linear()plays it as an easing, without any JavaScript during the movement. It cannot take an incoming speed. 21 min 2 live - 9.6Drag, Throw and InertiaPointer events follow a finger or a mouse, pointer capture keeps the drag alive, and the speed of the last 100 ms of movement is handed to a spring when the finger lets go. 25 min 2 live
- 9.7Build: The Swipe-to-Dismiss Cart DrawerbuildThe cart button opens a drawer with a spring. You can drag it and throw it shut, turn it round mid-flight, close it with a button or Escape, and it fades for people who ask for less motion. 45 min 1 live
Dailies · 4 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.
decide always sends it back to 0.IntermediateD04A drawer that closes on EscapeThis small drawer opens with a spring. It does not close on Escape, does not give focus back to Cart, and ignores reduced motion.Advanced