Zum Inhalt springen
Ressourcen

Bilder, Paletten & Easings, sofort einsatzbereit.

Kuratierte Fotos, Texturen, fertige Farbpaletten und Easing-Kurven für deine Animationen. Ansehen, laden und mit einem Klick kopieren.

Klick auf eine Karte öffnet den Editor mit Live-Vorschau (Kurve anpassen, auf Card, FAQ und Bild testen), das Kopier-Icon kopiert den cubic-bezier Wert direkt. In framer-motion nutzt du das Tupel (ease: [0.22, 1, 0.36, 1]), in CSS den String als transition-timing-function.

Signatur

Die Hauskurven der Library, weich und präzise.

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

Basis

Die klassischen CSS-Schlüsselwörter als Kurve.

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)

Sanftes Auslaufen (Out)

Startet schnell, läuft weich aus. Ideal für Einblendungen.

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)

Beschleunigen (In)

Startet langsam und zieht an. Gut für Ausblendungen.

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)

Rein und raus (InOut)

Symmetrisch, für Bewegungen die anfangen und enden.

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)

Überschwinger (Back)

Schießt leicht über das Ziel hinaus. Für verspielte Akzente.

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)