Easing is the curve that decides how an animated value changes speed between its start and its end. Two moves with the same distance and the same duration feel completely different depending on whether they start fast and settle, gather speed, or travel at one constant rate.
What it looks like
Picture a title sliding in from the left. With linear motion it starts at full speed and stops dead, like a part on a conveyor belt. With ease-out it arrives quickly and slows into place, so the eye lands on it together with the motion. The four curves you meet most often:
- Ease-out (fast start, gentle stop): arriving and settling. A restrained starting curve is
cubic-bezier(0.33, 1, 0.68, 1). - Ease-in (slow start, fast finish): leaving and gathering speed out of frame, for example
cubic-bezier(0.32, 0, 0.67, 0). - Ease-in-out (slow, fast, slow): a deliberate move from one resting position to another, for example
cubic-bezier(0.65, 0, 0.35, 1). - Linear (
0, 0, 1, 1): constant speed, no acceleration at all.
All four are cubic-bezier curves, written as four numbers: the two control points of the curve. Values above 1 or below 0 in the second and fourth numbers make the motion overshoot its target and come back. These numbers are starting points to edit, not a fixed set of categories.
A spring is a different model: it describes the motion through physics instead of a curve over a fixed duration. It has its own entry.
When to use it, and when not to
Let the gesture choose the curve. Something arriving usually wants ease-out, which is also the default for entrances in remocn's motion principles. Something leaving the frame can accelerate away with ease-in. A panel moving between two resting positions reads well with ease-in-out. Ask what force is acting: a fall under gravity accelerates, while a panel placed downward brakes.
Linear has a place too. It suits mechanical or continuous motion such as a marquee, a slow grid pan or a constant drift, where speeding up or slowing down would look wrong. On a visible arrival it looks mechanical, because nothing in the physical world starts and stops at full speed.
Easing cannot fix a problem it did not cause:
- Wrong timing. Choose when the change happens before choosing the curve. If a move feels frantic, test the duration, the travel distance and the framing first; reducing unnecessary travel is often a better fix than a softer curve.
- Wrong target. A curve will not repair a camera aimed at the wrong thing or a state change the viewer cannot follow.
- Overshoot as decoration. A bounce is an expressive choice that fits some objects, not a flourish every element needs.
Two practical habits help. Give position, opacity and blur their own timing when they do different jobs, so a moving object can stay legible at full opacity. And when one smooth move flows into another without a cut, check the speed at the join: a curve that ends at rest followed by one that starts fast produces a visible jerk.
How to ask for it in Remocn Studio
Ease the title in, no bounce.
Name the gesture and the feel rather than the math: "let the cards settle gently", "accelerate the old scene out of frame", "move the panel across with a slow start and a slow stop". Use "linear" only when you want constant speed.
When Studio's agent writes an animation, its easing is an editable four-number curve rather than a hardcoded preset, and Studio's design check flags a constant curve that cannot be tuned. To adjust it yourself, pick the element with Inspect: the properties pane shows the curve with draggable Bezier handles, coordinate fields and presets. The preview follows as you drag, and the finished curve is saved to the project as one change you can undo. Animations that still declare a list of named presets keep preset-only selection until they are migrated. To judge a curve properly, play the preview at 0.25× speed.
Ready-made components
remocn has no standalone easing component: easing is a setting inside a motion, not a block of its own. To see curves at work:
- Motion principles, the "Slow in and slow out" section
- Whip Pan, a transition built on eased motion
- Focus Pull, another eased transition
Related terms
Spring animation is the physical alternative to a fixed curve, and stagger is about how the same eased motion is offset across a group of elements. Both entries are being written.