Karten gestaffelt
Drei Karten steigen nacheinander auf. Der Versatz macht aus drei Bewegungen eine.
RessourcenBilder, Paletten & Easings,
Bilder, Paletten & Easings,
sofort einsatzbereit.
Kuratierte Fotos, Texturen, fertige Farbpaletten und Easing-Kurven für deine Animationen. Ansehen, laden und mit einem Klick kopieren.
Was animierst du?
Wie soll es wirken?
Soft SpringRuhig, ohne Nachschwingen
Ruhig
SmoothWeich, ohne Nachschlag
Hochwertig
Quint OutLanger, weicher Auslauf
Weich · Hochwertig
Signature
Wenn du dich nicht entscheiden willst, nimm eine davon. Sie stecken in fast allem, was hier gebaut ist.
SmoothWeich, ohne Nachschlag
Hochwertig
SnappyKurz und entschieden
GentleRuhig von A nach B
Ruhig · Weich
Rezepte
Eine Kurve allein ergibt noch keine Bewegung. Hier stehen sechs fertige Kombinationen aus Kurve, Dauer und Versatz.
Modal öffnen
Der Grund blendet schnell ein, das Fenster kommt etwas länger und minimal von unten.
Workspace
Menü aufklappen
Von der Oberkante her, mit einer kurzen Feder. Der Ursprung entscheidet, ob es hängt oder klappt.
Bild freigeben
Die Maske läuft nach oben weg, das Bild fährt langsamer zurück auf seine Größe.
Knopf drücken
Drück drauf. Kein Größerwerden beim Zeigen, nur ein kurzes Nachgeben unter dem Finger.
Built for teamsthat ship weekly
Zeilen aufstehen
Jede Zeile in einem eigenen Rahmen, der abschneidet. Der Versatz bleibt klein, sonst zerfällt der Satz.
Alle Easings
Für Oberflächen
Nach Einsatz sortiert: was sich an einem Modal, einer Karte, einem Bild gut anfühlt.
Expo OutSchnell weg, langes Auslaufen
Dramatisch · Hochwertig
Quint OutLanger, weicher Auslauf
Weich · Hochwertig
Circ OutZieht an, bremst spät
Dramatisch · Weich
Quart OutSanfter Auftritt
Sanft · Weich
Cubic In OutSymmetrisch, unauffällig
Ruhig · Mechanisch
Federn
Keine Kurve, sondern Physik. Die Dauer stellst du nicht ein, sie ergibt sich.
Soft SpringRuhig, ohne Nachschwingen
Ruhig
Smooth SpringNatürlich und weich
Organisch
Snappy SpringKurz und trocken
Responsive SpringFolgt der Hand sofort
Direkt · Organisch
Bouncy SpringSchießt einmal über
Verspielt · Ausdrucksstark
Heavy SpringSchwer und träge
Dramatisch · Organisch
Micro InteractionFast ohne Weg
Direkt · Mechanisch
Mit Ausschlag
Abprallen, Nachschwingen, Stufen. Sparsam einsetzen, dann wirken sie.
BackEinmal kurz drüber
Verspielt
Soft BounceEin kleiner Hüpfer
Verspielt
Smooth BounceZwei weiche Schwünge
Verspielt · Organisch
Strong BounceAufsetzen wie ein Ball
Ausdrucksstark · Verspielt
Soft ElasticSchwingt einmal aus
Organisch · Verspielt
Elastic OutDer Klassiker
Ausdrucksstark · Verspielt
Playful ElasticSchwingt mehrfach nach
Ausdrucksstark
2 StepsEin Zwischenhalt
Mechanisch
4 StepsSichtbar gerastert
Mechanisch
6 StepsFeinere Rasterung
Mechanisch
8 StepsFast durchgehend
Mechanisch
AnticipateHolt aus, dann drüber
Ausdrucksstark · Verspielt
SettleKommt in Fahrt an
Organisch · Ausdrucksstark
StutterDrei harte Schläge
Mechanisch · Ausdrucksstark
OrganicUnregelmäßig wie von Hand
Ausdrucksstark
GlitchSpringt und zuckt
Mechanisch · Ausdrucksstark
PowerQuad bis Quint, stufenlos
Weich
Klassische Kurven
Die vollständige Reihe als Familien, falls du einen bestimmten Wert suchst.
LinearOhne Beschleunigung
Mechanisch
Browser DefaultDer Browser-Standard
Ruhig
EaseKommt weich an
Ruhig
QuadKaum merklich weich
Ruhig · Sanft
CubicDer zuverlässige Auslauf
Weich
QuartLange Anlaufzeit
Dramatisch
QuintSehr spätes Anziehen
Dramatisch
ExpoSteht, dann weg
Dramatisch
CircRundes Anfahren
Organisch