Skip to content
Resources

Images, palettes & easings, ready to use.

Curated photos, textures, ready-made color palettes and easing curves for your animations. View, download and copy with one click.

What are you animating?
How should it feel?
Soft SpringCalm, no wobble
Calm

{ type: "spring", stiffness: 120, damping: 20 }

SmoothSoft, no overshoot
Refined
Quint OutLong, soft landing
Smooth · Refined

Signature

If you do not want to decide, take one of these. They sit in almost everything built here.

SmoothSoft, no overshoot
Refined

[0.22, 1, 0.36, 1] · 350 to 550 ms

SnappyShort and decided

[0.16, 1, 0.3, 1] · 160 to 240 ms

GentleCalm from A to B
Calm · Smooth

[0.4, 0, 0.2, 1] · 250 to 400 ms

Recipes

A curve alone is not a movement yet. Here are six finished combinations of curve, duration and offset.

Staggered cards

Three cards rise one after another. The offset turns three movements into one.

Modal opening

The backdrop fades fast, the panel takes a little longer and comes from below.

Workspace

Dropdown opening

From the top edge, with a short spring. The origin decides whether it hangs or unfolds.

Image reveal

The mask runs off upwards while the image settles back to size more slowly.

Button press

Press it. No growing on hover, just a short give under the finger.

Built for teamsthat ship weekly

Lines rising

Each line in its own clipping box. Keep the offset small or the sentence falls apart.

All easings

UI favourites

Sorted by use: what feels right on a modal, a card, an image.

Expo OutOff fast, long landing
Dramatic · Refined
Quint OutLong, soft landing
Smooth · Refined
Circ OutPulls, brakes late
Dramatic · Smooth
Quart OutSoft entrance
Soft · Smooth
Cubic In OutSymmetric, unobtrusive
Calm · Mechanical

Springs

Not a curve but physics. You do not set the duration, it falls out.

Soft SpringCalm, no wobble
Calm
Smooth SpringNatural and soft
Organic
Snappy SpringShort and dry
Responsive SpringFollows the hand at once
Snappy · Organic
Bouncy SpringOvershoots once
Playful · Expressive
Heavy SpringHeavy and slow
Dramatic · Organic
Micro InteractionAlmost no travel
Snappy · Mechanical

With overshoot

Bounce, wobble, steps. Use them sparingly and they land.

BackOnce just past
Playful
Soft BounceOne small hop
Playful
Smooth BounceTwo soft swings
Playful · Organic
Strong BounceLands like a ball
Expressive · Playful
Soft ElasticSwings out once
Organic · Playful
Elastic OutThe classic
Expressive · Playful
Playful ElasticWobbles several times
Expressive
2 StepsOne stop on the way
Mechanical
4 StepsVisibly stepped
Mechanical
6 StepsFiner stepping
Mechanical
8 StepsAlmost continuous
Mechanical
AnticipateWinds up, then past
Expressive · Playful
SettleArrives already moving
Organic · Expressive
StutterThree hard beats
Mechanical · Expressive
OrganicIrregular, as if by hand
Expressive
GlitchJumps and twitches
Mechanical · Expressive
PowerQuad to Quint, without steps
Smooth

Classic curves

The full set as families, in case you are looking for one particular value.

LinearNo acceleration
Mechanical
Browser DefaultThe browser default
Calm
EaseLands softly
Calm
QuadBarely noticeable
Calm · Soft
CubicThe reliable landing
Smooth
QuartLong run-up
Dramatic
QuintVery late pull
Dramatic
ExpoWaits, then gone
Dramatic
CircRounded start
Organic