A spring animation moves a value as if it were attached to a physical spring: you set stiffness, damping and mass, and the motion, including how long it takes and whether it overshoots, follows from those numbers. An eased animation works the other way round: you choose a duration and a curve, and the value follows that curve over exactly that time.
What it looks like
Picture a card scaling in. Driven by a spring, it accelerates toward its final size and then comes to rest. With enough damping it slows into place without passing the target. With less damping it grows slightly past full size, pulls back and settles, the small rebound people usually mean by "springy".
The three numbers each change one quality of the motion:
- Stiffness is how hard the spring pulls toward the target. A stiffer spring arrives sooner and feels snappier.
- Damping is the friction that bleeds energy out. Low damping lets the value overshoot and oscillate; high damping removes the rebound.
- Mass is the weight being moved. A heavier object starts more slowly and carries more momentum into the stop.
You do not pick the length of a spring directly; it ends when the motion comes to rest. That is the practical difference from easing, which is described in its own entry: easing shapes a move you have already timed, while a spring produces the timing from its physics.
When to use it, and when not to
A spring is worth it when a physical response belongs to the object's behavior. Studio's motion rules list it next to the cubic-bezier curves as one option among several, not a default. In the movement dictionary, scale-in is a scale from a chosen size "with a curve or spring", chosen when growth or depth carries meaning: a card landing on the stage, a chip popping into a group, a button reacting to a press.
It fits less well when:
- The text is long. Many words bouncing in one after another becomes visual noise; a calmer word-by-word reveal reads better.
- The brand is calm or serious. A visible bounce reads as casual. A heavily damped spring or an ease-out curve keeps the arrival composed.
- Something has to land on a beat. With overshoot, the eye reads the arrival at the peak or at rest, not at the moment the motion starts, so line up the visible landing with the cue rather than the start.
- Nothing in the scene is physical. Overshoot is an expressive choice, not a flourish every element needs. If everything wobbles, the frame feels restless; let finished content rest.
Remocn's own guidance keeps overshoot small: a light wind-up of a few frames and no more than about 110% scale, with no cartoon recoil.
How to ask for it in Remocn Studio
Settle the card with a soft spring, no overshoot.
Describe the feel and whether a rebound is wanted: "let the chips pop in on a spring with a little bounce", "land the panel on a stiff spring, no wobble". If you only want a smooth arrival with no physics, ask for an ease-out instead.
On Pro, Studio's conventions ask the agent to expose a spring's physics as numbers under a spring group in the component's props, one group per spring, rather than hardcoding them. Studio's design check notes a spring whose physics are nailed shut as an informational finding. When you pick the element with Inspect, the properties pane shows damping, stiffness and an optional mass as their own number controls, with a readout of the spring's response drawn above them. If the component has a switch that turns the spring on and off, the physical settings are available while it is on.
Ready-made components
- Spring Scale In: words pop in with a soft overshoot scale. Playful by design, so it is not the "no overshoot" version.
- Spring Settle: a scene transition where the outgoing scene shrinks away and the incoming items land on a stiff spring, staggered.
- Logo Enter: round brand chips that spring in one by one, then hold.
- Motion principles: the "Anticipation" section, on how much overshoot remocn allows.
Related terms
Easing is the alternative to a spring: a fixed duration shaped by a curve. Stagger, offsetting the same spring across a group of elements as Spring Settle does, gets its own entry, which is being written.