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.

Clicking a card opens the editor with a live preview (tweak the curve, test it on card, FAQ and image), the copy icon copies the cubic-bezier value directly. In framer-motion you use the tuple (ease: [0.22, 1, 0.36, 1]), in CSS the string as transition-timing-function.

Signature

The house curves of the library, soft and precise.

smoothcubic-bezier(0.22, 1, 0.36, 1)
snappycubic-bezier(0.16, 1, 0.3, 1)
gentlecubic-bezier(0.4, 0, 0.2, 1)

Basics

The classic CSS keywords as a curve.

linearcubic-bezier(0, 0, 1, 1)
easecubic-bezier(0.25, 0.1, 0.25, 1)
easeIncubic-bezier(0.42, 0, 1, 1)
easeOutcubic-bezier(0, 0, 0.58, 1)
easeInOutcubic-bezier(0.42, 0, 0.58, 1)

Soft ease-out (Out)

Starts fast, eases out softly. Ideal for fade-ins.

quadOutcubic-bezier(0.5, 1, 0.89, 1)
cubicOutcubic-bezier(0.33, 1, 0.68, 1)
quartOutcubic-bezier(0.25, 1, 0.5, 1)
quintOutcubic-bezier(0.22, 1, 0.36, 1)
expoOutcubic-bezier(0.16, 1, 0.3, 1)
circOutcubic-bezier(0, 0.55, 0.45, 1)

Accelerate (In)

Starts slow and picks up. Good for fade-outs.

quadIncubic-bezier(0.11, 0, 0.5, 0)
cubicIncubic-bezier(0.32, 0, 0.67, 0)
quartIncubic-bezier(0.5, 0, 0.75, 0)
quintIncubic-bezier(0.64, 0, 0.78, 0)
expoIncubic-bezier(0.7, 0, 0.84, 0)
circIncubic-bezier(0.55, 0, 1, 0.45)

In and out (InOut)

Symmetric, for movements that start and end.

quadInOutcubic-bezier(0.45, 0, 0.55, 1)
cubicInOutcubic-bezier(0.65, 0, 0.35, 1)
quartInOutcubic-bezier(0.76, 0, 0.24, 1)
quintInOutcubic-bezier(0.83, 0, 0.17, 1)
expoInOutcubic-bezier(0.87, 0, 0.13, 1)
circInOutcubic-bezier(0.85, 0, 0.15, 1)

Overshoot (Back)

Overshoots the target slightly. For playful accents.

backIncubic-bezier(0.36, 0, 0.66, -0.56)
backOutcubic-bezier(0.34, 1.56, 0.64, 1)
backInOutcubic-bezier(0.68, -0.6, 0.32, 1.6)