Easing-Funktionen in Webflow: Visueller Guide zu jeder Easing-Kurve

March 1, 2024

· 10 min

Ein visueller Guide zu Webflows Easing-Funktionen: eine kurze Geschichte des Easings, was jede Kurve bewirkt, wie Sie die richtige Easing-Kurve wählen und die GSAP-Äquivalente.

Dieses Easing-Projekt lag schon eine ganze Weile in unserem Konto. Wir haben es als praktischen visuellen Guide genutzt, als wir gerade erst mit Webflow angefangen haben. Als wir neulich wieder darauf gestoßen sind, schien es uns eine gute Idee, es etwas auszubauen und als visuellen Guide zu den Standard-Easing-Funktionen in Webflow zu teilen. Unten finden Sie einen visuellen Guide, einen Link zu einem ausführlicheren, klonbaren Projekt und eine Liste der verfügbaren Easing-Funktionen mit einer Beschreibung ihrer Wirkung. Aber beginnen wir mit einem kleinen Blick auf die Geschichte der Easing-Funktionen.

Die mathematischen Wurzeln

Im Kern von Easing-Funktionen liegt ein reiches mathematisches Fundament. Das Konzept des Easings lässt sich auf die Physik und die Differentialrechnung zurückführen, wo die Prinzipien von Beschleunigung und Verzögerung die Bewegung von Objekten in der realen Welt bestimmen. Mathematiker und Physiker entwickelten Formeln, um diese natürlichen Bewegungen zu beschreiben, und legten damit den Grundstein für das, was später in der digitalen Animation Anwendung finden sollte. Die quadratischen, kubischen, quartischen und quintischen Funktionen bieten unter anderem eine mathematische Grundlage, um die Feinheiten von Bewegung und Geschwindigkeit nachzubilden, sodass Animationen über die Grenzen einer linearen Bewegung hinauswachsen können.

Die Entwicklung in der Animation

Der Übergang von der Mathematik zur Animation begann mit traditionellen, handgezeichneten Techniken. Frühe Animatoren, etwa aus den Pionierzeiten von Disney, wendeten die Prinzipien des Easings intuitiv an, um ihre Figuren zum Leben zu erwecken, lange bevor der Begriff „Easing“ offiziell geprägt wurde. Sie beobachteten reale Bewegungen und fingen deren Essenz Bild für Bild ein, um Animationen zu schaffen, die natürlich flossen und Emotionen sowie Charakter vermittelten. Diese sorgfältige Aufmerksamkeit für die Dynamik von Bewegung legte den Grundstein für Easing-Funktionen, auch wenn damals alles noch von Hand gemacht wurde.

Die digitale Revolution

Mit dem Aufkommen von Computergrafik und digitaler Animation fanden die Prinzipien des Easings neuen Nährboden. Das digitale Zeitalter ermöglichte die präzise Kontrolle und Steuerung von Bewegungskurven und erlaubte es Animatoren und Designern, komplexe mathematische Funktionen mühelos einzusetzen (Wortspiel beabsichtigt). Software begann, diese Easing-Funktionen einzubauen, und bot vordefinierte Optionen wie „Ease in“, „Ease out“ und „Elastic“, um Objekte optisch ansprechend zu animieren.

Easing-Funktionen im User-Interface-Design

Die Anwendung von Easing-Funktionen reichte über die traditionelle Animation hinaus und spielte bald eine wichtige Rolle im Design von Benutzeroberflächen (UI) und Nutzererlebnissen (UX). Als digitale Oberflächen interaktiver wurden, erkannten Designer, wie wichtig Easing-Funktionen sind, damit Übergänge natürlicher und intuitiver wirken. Das sanfte Aufklappen eines Menüs, das Hüpfen einer Benachrichtigung oder das Einblenden eines Dialogfensters. Alle diese Interaktionen profitierten von Easing-Funktionen und verbesserten das Nutzererlebnis, indem sie die Fließfähigkeit der natürlichen Welt nachahmten.

Die digitale Leinwand von heute

Heute sind Easing-Funktionen ein unverzichtbares Werkzeug im Repertoire digitaler Designer und in Webdesign-Plattformen wie Webflow, Animationsbibliotheken und UI-Design-Software eingebaut. Sie helfen Designern, immersive, fesselnde digitale Erlebnisse zu schaffen, die die Fantasie der Nutzer anregen und ihre Aufmerksamkeit halten. Von den mathematischen Gleichungen der Vergangenheit bis zu den interaktiven Webseiten von heute haben Easing-Funktionen die Zeit durchreist, sich weiterentwickelt und angepasst, doch ihre Kernaufgabe bleibt dieselbe: der digitalen Welt Leben einzuhauchen und sie so reich und dynamisch zu machen wie die Welt vor unseren Fenstern.

Update: Es gibt jetzt eine GSAP-Version dieses Guides

Der visuelle Guide unten zeigt die Standard-Easing-Funktionen von Webflow (klassisches IX2) so, wie sie zum Zeitpunkt des Schreibens waren. Inzwischen hat Webflow GreenSock übernommen, und GSAP ist jetzt kostenlos und fest in Webflows neuere Interaktionen integriert. Deshalb haben wir ein Begleitstück gebaut: A Visual Guide to GSAP Easing ↗

Es deckt das gesamte GSAP-Easing-Vokabular ab, mit spielbaren Live-Runnern für jede Kurve: die Power-Leiter (power0 bis power4), abgebildet auf die Penner-Namen, die Sie bereits kennen, die sanften Operatoren (Sine, Expo, Circ), die Eases mit Persönlichkeit (Back, Elastic, Bounce) und die GSAP-exklusiven Extras, die es im klassischen Easing nie gab (RoughEase, SlowMo, CustomEase, CustomBounce, CustomWiggle). Es gibt ein Ease-Rennen im direkten Vergleich, kopierbaren Code auf jeder Karte und eine vollständige Äquivalenztabelle, die jedes Ease über Webflow, GSAP, Penner und CSS hinweg abbildet.

Wenn Sie in Webflows neueren, GSAP-basierten Interaktionen animieren, starten Sie dort. Der klassische Webflow-Guide unten gilt weiterhin für die Arbeit mit IX2.

Wenn Sie ein Webflow-Easing bereits beim Namen kennen, hier ist das GSAP-Äquivalent: Ease Out Quint ist power4.out, Ease In Out Cubic ist power2.inOut, Ease Out Back ist back.out(1.7), Ease Out Elastic ist elastic.out(1, 0.3) und Out Bounce ist bounce.out. Linear ist none, und das Standard-Ease von GSAP ist power1.out.

Sie können durch die Interaktion oben scrollen oder sich das vollständige Projekt samt Klonvorlage hier ansehen.

Und jetzt zum Kern der Sache: Was bewirkt jede Easing-Funktion?

Linear (none)

Ursprung & Bedeutung: So geradlinig wie eine Autobahn in der Wüste. Linear steht für eine gleichmäßige Änderungsrate: keine Beschleunigung, keine Verzögerung, nur ein stetiges Tempo von Anfang bis Ende.
Was es bewirkt: Bewegt oder blendet Objekte mit konstanter Geschwindigkeit ein oder aus. Perfekt für alle, die Einfachheit und Berechenbarkeit in ihren Animationen schätzen. Es ist außerdem das Easing der Wahl für Endlosschleifen, wie das CMS-gestützte Ticker-Band, das wir gebaut haben.

Ease

Ursprung & Bedeutung: Denken Sie daran, wie Sie in ein heißes Bad hineingleiten. Es beginnt langsam, wird schneller und wird dann wieder langsamer, ein sanfter, angenehmer Übergang.
Was es bewirkt: Verleiht Animationen ein natürliches Gefühl, indem sie langsam starten, in der Mitte schneller werden und am Ende wieder abbremsen. Aus gutem Grund ist es die Standardwahl!

Ease in

Ursprung & Bedeutung: Wie auf Zehenspitzen in das erwähnte Bad zu steigen: Es geht darum, sanft zu beginnen.
Was es bewirkt: Startet die Animation langsam und beschleunigt dann. Ideal für Elemente, die den Bildschirm verlassen, weil sie unterwegs Fahrt aufnehmen.

Ease out

Ursprung & Bedeutung: Das Gegenteil von Ease in, so als würden Sie sich endlich ganz in das Bad zurücklehnen.
Was es bewirkt: Beginnt abrupter und bremst bis zu einem sanften Halt ab. Ideal für Elemente, die auf dem Bildschirm ankommen: Der schnelle Start wirkt reaktionsfreudig, und das langsame Ende vermittelt ein natürliches Gefühl von Reibung.

Ease in out

Ursprung & Bedeutung: Vereint das Beste aus beiden Welten: ein sanfter Start und Abschluss mit einer Prise Schwung in der Mitte.
Was es bewirkt: Startet und endet langsam, mit Beschleunigung in der Mitte. Der Allrounder für Übergänge, die dynamisch und zugleich geschmeidig wirken sollen.

Quad

Ursprung & Bedeutung: Quad stammt von „quadratisch“ und bezeichnet ein Polynom zweiten Grades. Es ist wie ein gemütlicher Spaziergang, der nach und nach an Tempo gewinnt.
Was es bewirkt: Animationen mit einer Quad-Easing-Funktion starten langsam und beschleunigen sanft, einer quadratischen Kurve folgend. Es ist dezenter als manche seiner dramatischeren Verwandten und perfekt für weiche Übergänge und einfache Bewegungen.

Cubic

Ursprung & Bedeutung: Abgeleitet von „kubisch“, bezieht sich diese Funktion auf ein Polynom dritten Grades. Stellen Sie sich ein Auto vor, das sanft von einem Stoppschild anfährt. Es startet langsam, nimmt aber spürbarer Fahrt auf als Quad.
Was es bewirkt: Cubic-Animationen beginnen noch sanfter als Quad, beschleunigen aber schneller und erzeugen eine ausgeprägtere Kurve. Damit eignen sie sich hervorragend, um Aufmerksamkeit zu lenken und dabei trotzdem einen geschmeidigen Verlauf zu behalten.

Quart

Ursprung & Bedeutung: Quart kommt von „quartisch“, einem Polynom vierten Grades. Das ist wie ein Sprinter, der aus den Startblöcken explodiert, mit einem allmählichen Aufbau, der in eine rasante Beschleunigung mündet.
Was es bewirkt: Mit einer Quart-Easing-Funktion starten Animationen sehr langsam und nehmen dann schnell Fahrt auf, was eine steile Beschleunigungskurve ergibt. Ideal für dynamische Bewegungen, die eine deutliche Veränderung oder Ankunft betonen sollen.

Quint

Ursprung & Bedeutung: Quint leitet sich von „quintisch“ ab und bezieht sich auf ein Polynom fünften Grades. Stellen Sie sich einen Raketenstart vor: ein kurzer Moment des Verharrens auf der Startrampe, bevor der kraftvolle Aufstieg beginnt.
Was es bewirkt: Quint-Animationen haben den langsamsten Start dieser Gruppe, beschleunigen dann aber dramatisch und bieten eine sehr scharfe Kurve. Diese Funktion ist perfekt für dramatische Auftritte oder wenn Sie eine starke visuelle Wirkung erzielen möchten.

Sine

Ursprung & Bedeutung: Sine basiert auf der mathematischen Sinuswelle, die für ihren sanften, schwingenden Charakter bekannt ist. Es ist wie das sanfte Kommen und Gehen der Wellen an einem Strand.
Was es bewirkt: Sine-Easing folgt der glatten Kurve einer Sinuswelle, sodass sich die Geschwindigkeit allmählich und harmonisch ändert. Das erzeugt eine natürliche, organische Bewegung, die beruhigend und angenehm fürs Auge ist und sich hervorragend für dezente Übergänge eignet.

Expo

Ursprung & Bedeutung: Expo ist die Kurzform von „exponentiell“ und steht für Wachstum mit immer rascherer Rate. Stellen Sie sich die immer steilere Kurve einer Achterbahn vor, die bergab rast.
Was es bewirkt: Expo-Animationen starten kaum wahrnehmbar und explodieren dann förmlich in Bewegung, mit einer extrem steilen Beschleunigungskurve. Diese Funktion ist ideal für schnelle, energiegeladene Übergänge, die rasch Aufmerksamkeit erregen sollen.

Circ

Ursprung & Bedeutung: Circ bezieht sich auf „zirkular“ und verkörpert die Bewegung entlang einer Kreisbahn, nach innen oder nach außen. Denken Sie an den sanften Bogen eines Balls, der durch die Luft geworfen wird.
Was es bewirkt: Circ-Easing-Animationen bewegen sich mit der Geschmeidigkeit und Präzision eines Kreisbogens, starten langsam und werden auf eine Weise schneller, die natürlich und elegant wirkt. Perfekt für Elemente, die sich mit Anmut und Fließfähigkeit bewegen oder überblenden sollen.

Back

Ursprung & Bedeutung: Back steht für eine Bewegung, die über den Start- oder Endpunkt hinausgeht und dann zurückkehrt, wie das Zurückziehen einer Steinschleuder vor dem Abschuss.
Was es bewirkt: Back-Easing lässt Animationen über ihr Ziel hinausschießen, bevor sie zur Ruhe kommen, was einen verspielten Rückfedereffekt erzeugt. Es verleiht Übergängen eine lebendige, elastische Qualität und macht sie dynamischer und ansprechender.

Elastic

Ursprung & Bedeutung: Elastic verkörpert, wie der Name schon sagt, das Verhalten eines Gummibands, das sich dehnt und zurückschnellt. Es ist die Diva unter den Easing-Funktionen mit einer auffälligen, übertriebenen Bewegung.
Was es bewirkt: Elastic-Animationen dehnen sich und federn mit lebhafter, übertriebener Elastizität, sodass sich Elemente anfühlen, als bewegten sie sich mit der Energie und Flexibilität eines Gummibands. Diese Funktion ist perfekt für auffällige, lebendige Animationen, die einen Hauch von Verspieltheit und Spaß hinzufügen.

Bounce, bounce past

Ursprung & Bedeutung: Wie ein springender Ball ahmen diese Interaktionen die Physik des Aufprallens auf eine Fläche nach, wobei Bounce Past einen kleinen Überschwung für mehr Drama hinzufügt.
Was es bewirkt: Erzeugt einen verspielten, fesselnden Effekt, bei dem Elemente aufspringen, bevor sie zur Ruhe kommen. Es bringt Leben und Energie auf die Seite.

Swing from to, swing from, swing to

Ursprung & Bedeutung: Stellen Sie sich ein Pendel oder eine Schaukel vor. Diese Interaktionen fangen das Wesen der Schwingbewegung ein, entweder von einer Seite zur anderen oder mit einem Schwung am Anfang oder am Ende.
Was es bewirkt: Verleiht Elementen eine elegante Schwingbewegung und erzeugt ein Gefühl von Rhythmus und Fluss. Ideal, um Aufmerksamkeit auf subtile, raffinierte Weise zu lenken.

Und das war es im Grunde. Die Geschichte der Easing-Funktionen ist eine faszinierende Saga der Innovation, ein Zusammenspiel von Kunst und Wissenschaft, das den ewigen Wunsch der Menschheit widerspiegelt, die Schönheit und Komplexität von Bewegung in unseren Schöpfungen nachzubilden.

Bereit, diese Easing-Kurven einzusetzen? Unser Beitrag über das Meistern dynamischer Animationen in Webflow zeigt, was sie für eine ganze Seite leisten können, und die Slider-Steuerelemente aus Dance of the Dots sind ein gutes Easing-Beispiel zum Nachbauen. Weitere Projekte zum Klonen und Anpassen finden Sie in unseren Webflow-Cloneables.

Häufig gestellte Fragen

Was sind Easing-Funktionen?

Eine Easing-Funktion steuert, wie sich die Geschwindigkeit einer Animation zwischen Start und Ende verändert. Statt sich mit konstantem Tempo zu bewegen, kann ein Element langsam starten, beschleunigen, über das Ziel hinausschießen oder aufspringen, wodurch Bewegung natürlicher wirkt.

Wie wähle ich die richtige Easing-Kurve für Webflow-Animationen?

Beginnen Sie für die meisten Interface-Übergänge mit Ease out, denn der schnelle Start wirkt reaktionsfreudig und das langsame Ende natürlich. Nutzen Sie Ease in für Elemente, die den Bildschirm verlassen, Ease in out für Bewegungen quer über den Bildschirm und Linear für Schleifen oder alles, was mit konstanter Geschwindigkeit laufen soll. Heben Sie sich Back, Elastic und Bounce für Momente auf, in denen Sie Persönlichkeit zeigen möchten.

Funktionieren diese Easing-Funktionen noch in Webflows GSAP-basierten Interaktionen?

Ja, die Namen im Penner-Stil lassen sich auf GSAP-Eases abbilden. Quad, Cubic, Quart und Quint werden zu power1 bis power4, und Sine, Expo, Circ, Back, Elastic und Bounce behalten ihre Namen. Der GSAP-Begleit-Guide oben enthält die vollständige Äquivalenztabelle.