Easing that looks like money

I have a small, embarrassing test I run on motion design portfolios when I am hiring. I scrub through the reel and ignore the typography. I ignore the color. I ignore the cleverness of the concept. I watch only the easing. Within thirty seconds I have an opinion, and the opinion is rarely wrong.

The reason is that easing is the part of motion that takes the longest to develop taste for, and the part that gets defaulted-to the most by people who haven't. Every other element in a composition can be cribbed: a font from a magazine, a palette from Coolors, a layout from a Dribbble shot. Easing is what you bring. It is your handwriting.

The good news is that taste is teachable, and easing is one of the small domains where a few specific curves, internalized and reused, can carry the entire personality of your work. I want to spend this post going through six curves that I use professionally, what each one communicates, and why the difference between an okay curve and a great one is what separates an ad from a Super Bowl ad.

The grammar of an easing curve

A cubic Bezier easing curve in CSS has four numbers: cubic-bezier(x1, y1, x2, y2). The curve starts at (0,0) and ends at (1,1). The two control points pull the curve toward themselves between the endpoints. Y is "progress through the animation." X is "time elapsed." The slope of the curve at any point is "how fast the animation is moving at that moment."

This is technical and not actually how I think about it day-to-day. Day-to-day, every easing curve is one of three shapes: ease in (slow start, fast finish — feels like falling), ease out (fast start, slow finish — feels like landing), or ease in-out (slow on both ends — feels like a sigh). Within each shape, the exact numbers determine the personality: tight or loose, springy or weighty, mechanical or organic.

The browser's defaults — ease, ease-in, ease-out, ease-in-out — are fine. They are the equivalent of Times New Roman: they communicate "I did not have an opinion." A motion designer with opinions does not use them.

Curve 1: The settle

cubic-bezier(.16, 1, .3, 1)

This is the cinematic ease-out I default to for any element that arrives. Titles landing, modals appearing, cards rising into view. It spends 70% of its duration in the last 30% of its travel — meaning the element rushes in, then settles slowly into place over the long tail.

What it communicates: confidence. The element knows where it is going. It does not overshoot. It does not bounce. It arrives like an actor hitting their mark.

I use this curve more than all the others combined. If you can only learn one, learn this one. Pair it with a duration between 600ms and 900ms for most editorial motion. Shorter feels rushed; longer feels indulgent.

Curve 2: The launch

cubic-bezier(.7, 0, .84, 0)

The opposite of the settle. Slow start, fast finish. I use it for elements that depart — exit animations, content scrolling out of frame, transitions where the outgoing element should accelerate as it leaves.

What it communicates: dismissal. The element is gone. It does not linger.

The trap with this curve is using it for entrance animations. The slow start feels hesitant on entrance — the element looks like it is unsure whether to arrive. Save it for exits. Pair it with a slightly shorter duration (300-500ms) because exits should not draw attention to themselves.

Curve 3: The professional in-out

cubic-bezier(.65, 0, .35, 1)

When something both starts and stops, I reach for this. It is a slightly asymmetric in-out — biased toward a longer tail than a longer ramp-up — which prevents the "rocking horse" feeling you get from symmetric eases.

What it communicates: control. The element is moving from A to B with purpose. Neither flailing on departure nor crashing on arrival.

This is my default for chart animations (a bar growing from 0 to its value), for camera moves (the viewport panning across a scene), for any animation that has a clear start and end and should feel mechanical-but-not-robotic. Duration: 800ms to 1.4s depending on travel distance.

Curve 4: The bounce-in

cubic-bezier(.34, 1.56, .64, 1)

Notice the 1.56 — values above 1 push the curve past the endpoint and back. This creates a literal overshoot. The element arrives, goes slightly past, and snaps back.

What it communicates: personality. Whimsy, energy, sometimes immaturity. I use this sparingly. A bounce on a corporate title sequence feels childish. A bounce on a consumer app feature reveal feels delightful. Read the brand before reaching for it.

When you do use a bounce, pair it with a short duration (500-700ms) and a small overshoot amount. A large overshoot feels desperate; a small one feels intentional. The number 1.56 is my standard; 1.7+ veers into novelty.

Curve 5: The anticipate-and-strike

cubic-bezier(.7, -.5, .4, 1.4)

Both control points are outside the (0,1) range, creating an S-curve that dips below and overshoots above. The element first moves backward slightly, then springs forward past its target, then settles.

What it communicates: muscularity, drama, attention. This is the curve I use for the single most important reveal in a composition — the headline of a hero shot, the answer in an explainer, the punchline of an ad. It is the visual equivalent of a director's pause before the reveal.

It is also a curve to use exactly once per composition. Twice is too many. The whole point is that it draws the eye; if the eye is drawn three times, the eye gets bored.

Duration matters here: 700-1000ms is the window. Shorter and the anticipation does not read; longer and it feels theatrical.

Curve 6: The whisper

cubic-bezier(.4, 0, .2, 1)

This is the gentlest ease in my regular rotation. Material Design has used variations of it as their default for years, and there is a reason: it works for almost everything, communicates almost nothing, and gets out of the way.

What it communicates: nothing in particular. It is the no-opinion ease, but the good version of no-opinion. When I want motion to be present but not commented-upon — background gradient drift, subtle scale on hover, image filters fading in — I reach for the whisper.

The trap is using only this curve. A reel of compositions using only the whisper is technically competent and emotionally flat. The whisper is the supporting cast, not the lead.

What an easing curve is doing for the brain

A digression that I find useful when teaching this. The reason easing works at all is that the human visual system is exquisitely tuned for predicting motion. We evolved to track prey and predators; our brains run a real-time forward model of "where will this thing be in 100ms." When motion confirms the model, the motion feels natural. When motion violates the model, the brain flags it as worth attention.

Linear motion (no easing) violates the model in a small, persistent way: real-world objects do not move at constant velocity. They accelerate and decelerate. Linear motion looks mechanical because it is mechanical.

Cinematic easing — the settle, the professional in-out — confirms the model. The eye expects deceleration as an object approaches its rest position, and gets it. The motion feels natural even though it is, mathematically, just as artificial as linear.

The dramatic curves — anticipate-and-strike, bounce — deliberately violate the model. The brain flags them. Attention is captured. This is why a bouncy entrance pulls the eye and a linear entrance fades into the background. The motion designer is exploiting a perceptual bug for editorial effect.

The number that fixes everything: duration

A confession. I have spent more time tuning durations than tuning curves. The curve sets the shape of the motion; the duration sets its weight. A settle at 400ms feels punchy and energetic. The same settle at 1200ms feels lavish and indulgent. The same settle at 2000ms feels like the composition has stopped working.

My ranges, by category:

• Entrances of small elements (captions, lower thirds): 400-700ms
• Entrances of headlines: 700-1100ms
• Camera moves and pans: 1000-2000ms
• Backdrop drifts: 4000-8000ms (very slow on purpose)
• Exits of anything: 200-400ms (always faster than the entrance)

The rule I keep coming back to: exits should be 50-70% the duration of entrances. The viewer has already seen the element; they do not need time to read it on the way out. Fast exits feel snappy; slow exits feel like the composition is dragging.

Putting it together

Here is the pattern I teach motion designers I am bringing onto HyperFrames. Pick one curve per composition for the bulk of the work — usually the settle, occasionally the professional in-out. Pick one curve for the hero moment — usually the anticipate-and-strike. Use the whisper for backgrounds. Use the launch for exits. Maybe deploy a bounce somewhere for a single charming detail.

That is five curves total in a 30-second composition. Five curves, six durations, and the entire personality of the piece emerges. (If you are coming from a timeline tool, the After Effects comparison covers how this maps to graph-editor habits.) The "looks like money" feeling is the cumulative effect of every one of those choices being deliberate.

You do not need a library. You do not need a preset pack. You need to type these six numbers into a CSS file, and to feel the difference each one makes. Open a composition in the HyperFrames playground. Replace ease-out with cubic-bezier(.16, 1, .3, 1). Render. Watch. Feel.

How to develop the ear

A practical exercise I give people who want to develop taste in easing: pick three motion designers whose work you admire. For each, watch ten seconds of one of their pieces, frame-by-frame, scrubbing. Pay attention to nothing but the easing. After two or three watches, try to write down — in cubic-bezier numbers — what easing they used.

You will be wrong, the first ten times. By the twentieth, you will be in the right neighborhood. By the fiftieth, you will be naming the curve before you finish the first viewing. This is the same way ear training works for musicians: repeated exposure, deliberate attention, gradual calibration.

The curve I most often see junior designers misidentify is the difference between a settle (cubic-bezier(.16, 1, .3, 1)) and a Material-style standard ease (cubic-bezier(.4, 0, .2, 1)). They look similar in a thumbnail. They feel completely different at 60fps in motion. The settle hangs longer at the end; the Material curve resolves more cleanly. One is editorial; the other is product. Knowing which one is which, by feel, is most of the work.

The curve as signature

A final point I want to leave you with. Every motion designer I respect has a signature curve. It is not their only curve, but it is the one they reach for first, the one they default to when nothing else suggests itself. You can recognize their work, sometimes, by the easing alone.

Mine is the settle, cubic-bezier(.16, 1, .3, 1). I have used it on every project I have shipped this year. It is the curve that, to my eye, communicates the kind of confidence I want my work to have. Yours might be different — a tighter settle, a more dramatic anticipate-and-strike, a perfectly tuned Material curve. The point is to have one. To know it. To use it deliberately.

The work that looks like money is the work that knows what it is doing with every number. Start with the curves. The rest follows.

Now you know.