Responsive Animations for Every Screen Size and Device

Bevor ich mich der Entwicklung zugewandt habe, habe ich viel Motion Graphics mit After Effects gemacht. Aber selbst mit diesem Hintergrund fand ich Animationen im Web ziemlich verwirrend.

Videoaufnahmen werden in einem bestimmten Verhältnis gestaltet und dann exportiert. Fertig! Aber im Web gibt es keine „Export-Einstellungen“. Wir stellen den Code einfach der Welt zur Verfügung und unsere Animationen müssen sich an jedes Gerät anpassen, auf dem sie landen.

Sprechen wir also über responsive Animation! Wie gehen wir am besten mit Animationen im wilden, wilden Web um? Wir werden einige allgemeine Ansätze, einige GSAP-spezifische Tipps und einige Bewegungsprinzipien behandeln. Beginnen wir mit einigen Rahmenbedingungen...

Wie wird diese Animation verwendet?

Zach Sauciers Artikel über responsive Animationen empfiehlt, einen Schritt zurückzutreten, um über das Endergebnis nachzudenken, bevor man sich in den Code stürzt.

Wird die Animation ein Modul sein, das über mehrere Teile Ihrer Anwendung wiederholt wird? Muss sie überhaupt skaliert werden? Dies im Hinterkopf zu behalten, kann helfen, die Methode zu bestimmen, mit der eine Animation skaliert werden soll, und Zeitverschwendung vermeiden.

Das ist ein großartiger Ratschlag. Ein **riesiger** Teil der Gestaltung responsiver Animationen ist zu wissen, ob und wie diese Animation skaliert werden muss, und dann von Anfang an die richtige Vorgehensweise zu wählen.

Die meisten Animationen fallen in die folgenden Kategorien

• Fest: Animationen für Dinge wie Icons oder Ladeanzeigen, die auf allen Geräten die gleiche Größe und das gleiche Seitenverhältnis beibehalten. Hier gibt es nichts zu befürchten! Geben Sie ein paar Pixelwerte fest ein und widmen Sie sich dem Rest.
• Fließend: Animationen, die sich fließend über verschiedene Geräte hinweg anpassen müssen. Die meisten Layout-Animationen fallen in diese Kategorie.
• Gezielt: Animationen, die für ein bestimmtes Gerät oder eine bestimmte Bildschirmgröße spezifisch sind oder sich an einem bestimmten Breakpoint erheblich ändern, wie z. B. nur für Desktops bestimmte Animationen oder Interaktionen, die von gerätespezifischen Interaktionen abhängen, wie Touch oder Hover.

Fließende und gezielte Animationen erfordern unterschiedliche Denkweisen und Lösungen. Werfen wir einen Blick darauf...

Fließende Animation

Wie Andy Bell sagt: Seien Sie der Mentor des Browsers, nicht sein Mikromanager – geben Sie dem Browser solide Regeln und Hinweise, und lassen Sie ihn dann die richtigen Entscheidungen für die Besucher treffen. (Hier sind die Folien aus dieser Präsentation.)

Fließende Animation bedeutet, dass der Browser die harte Arbeit leistet. Viele Animationen können einfach an verschiedene Kontexte angepasst werden, indem von Anfang an die richtigen Einheiten verwendet werden. Wenn Sie diesen Pen vergrößern, können Sie sehen, dass die Animation, die Viewport-Einheiten verwendet, fließend skaliert, wenn sich der Browser anpasst.

Die lila Box ändert sogar ihre Breite bei verschiedenen Breakpoints, aber da wir Prozente verwenden, um sie zu bewegen, skaliert die Animation ebenfalls mit.

Das Animieren von Layout-Eigenschaften wie left und top kann zu Layout-Reflows und ruckeligen Animationen führen. Bleiben Sie daher, wo immer möglich, bei Transforms und Opacity.

Wir sind jedoch nicht nur auf diese Einheiten beschränkt – werfen wir einen Blick auf einige andere Möglichkeiten.

SVG-Einheiten

Eines der Dinge, die ich am Arbeiten mit SVG liebe, ist, dass wir SVG-Benutzereinheiten für Animationen verwenden können, die sofort responsiv sind. Der Name sagt es schon – Scalable Vector Graphic. In der SVG-Welt werden alle Elemente an spezifischen Koordinaten gezeichnet. Der SVG-Raum ist wie unendlich viel Millimeterpapier, auf dem wir Elemente anordnen können. Die viewBox definiert die Dimensionen des Millimeterpapiers, das wir sehen können.

viewBox="0 0 100 50”

In der nächsten Demo ist unsere SVG-viewBox 100 Einheiten breit und 50 Einheiten hoch. Das bedeutet, wenn wir das Element um 100 Einheiten auf der x-Achse animieren, wird es immer um die gesamte Breite seines übergeordneten SVG bewegt, unabhängig davon, wie groß oder klein dieses SVG ist! Vergrößern Sie die Demo, um es zu sehen.

Das Animieren eines untergeordneten Elements basierend auf der Breite eines übergeordneten Containers ist im HTML-Bereich etwas kniffliger. Bisher mussten wir die Breite des übergeordneten Elements mit JavaScript abrufen, was einfach genug ist, wenn Sie von einer transformierten Position animieren, aber etwas fummeliger, wenn Sie zu etwas animieren, wie Sie in der folgenden Demo sehen können. Wenn Ihr Endpunkt eine transformierte Position ist und Sie den Bildschirm vergrößern, müssen Sie diese Position manuell anpassen. Unordentlich... 🤔

Wenn Sie Werte bei Größenänderung anpassen, denken Sie daran, Debouncing zu verwenden oder die Funktion sogar auszulösen, nachdem der Browser die Größenänderung abgeschlossen hat. Resize-Listener lösen jede Sekunde eine Menge Events aus, daher ist das Aktualisieren von Eigenschaften bei jedem Event viel Arbeit für den Browser.

Aber diese Animation-Geschwindigkeitsbremse wird bald der Vergangenheit angehören! Trommelwirbel bitte… 🥁

Nach fast 15 Jahren als stark nachgefragtes (unmögliches!?) Feature sind größenbasierte Container Queries & Units in Chrome/Edge 105 & Safari 16 erschienen! Firefox ist nicht weit dahinter.

(auch: es gibt einen Prototyp von Style Queries!)https://#/A2zgd9l4FC

— @[email protected] (@TerribleMia) September 15, 2022

Container-Einheiten! Wunderbar. Zum Zeitpunkt, an dem ich das schreibe, funktionieren sie nur in Chrome und Safari – aber vielleicht haben wir bis zum Zeitpunkt, an dem Sie das lesen, auch Firefox. Sehen Sie sie in Aktion in dieser nächsten Demo. Schauen Sie sich diese kleinen Kerlchen an! Ist das nicht aufregend, Animationen, die relativ zu den übergeordneten Elementen sind!

Fließende Layout-Übergänge mit FLIP

Wie wir bereits erwähnt haben, ist in der SVG-Welt jedes Element sauber auf einem Gitter platziert und lässt sich sehr einfach responsiv verschieben. Im HTML-Bereich ist es viel komplexer. Um responsive Layouts zu erstellen, verwenden wir eine Reihe von verschiedenen Positionierungsmethoden und Layoutsystemen. Eine der größten Schwierigkeiten bei der Animation im Web ist, dass viele Änderungen am Layout nicht animiert werden können. Vielleicht muss ein Element von Position relative zu fixed wechseln, oder einige Kinder eines Flex-Containers müssen reibungslos durch das Viewport geschoben werden. Vielleicht muss ein Element sogar umgegliedert und an eine völlig neue Position im DOM verschoben werden.

Knifflig, oder?

Nun, die FLIP-Technik ist da, um den Tag zu retten; sie ermöglicht es uns, diese unmöglichen Dinge einfach zu animieren. Die Grundprämisse ist

• Zuerst: Erfassen Sie die Anfangsposition der an der Übergang beteiligten Elemente.
• Zuletzt: Verschieben Sie die Elemente und erfassen Sie die Endposition.
• Invertieren: Ermitteln Sie die Änderungen zwischen dem ersten und letzten Zustand und wenden Sie Transformationen an, um die Elemente wieder in ihre ursprüngliche Position zu invertieren. Das lässt es so aussehen, als ob die Elemente immer noch an der ersten Position sind, aber das sind sie tatsächlich nicht.
• Spielen: Entfernen Sie die invertierten Transformationen und animieren Sie vom gefälschten ersten Zustand zum letzten Zustand.

Hier ist eine Demo, die das FLIP-Plugin von GSAP verwendet, das die ganze schwere Arbeit für Sie erledigt!

Wenn Sie mehr über die Vanilla-Implementierung erfahren möchten, lesen Sie Paul Lewis' Blogbeitrag – er ist der Urheber der FLIP-Technik.

Fließende Skalierung von SVG

Sie haben mich erwischt... das ist nicht wirklich ein Animationstipp. Aber die richtige Bühne zu bereiten ist für gute Animationen unerlässlich! SVG skaliert von Haus aus sehr gut, aber wir können steuern, wie es mit preserveAspectRatio noch weiter skaliert, was sehr praktisch ist, wenn das Seitenverhältnis des SVG-Elements und das Seitenverhältnis der viewBox unterschiedlich sind. Es funktioniert ähnlich wie die Eigenschaften background-position und background-size in CSS. Die Deklaration besteht aus einem Ausrichtungswert (background-position) und einem Meet oder Slice Referenz (background-size).

Was die Meet- und Slice-Referenzen angeht – slice ist wie background size: cover, und meet ist wie background-size: contain.

• preserveAspectRatio="MidYMax slice" – Ausrichtung auf die Mitte der x-Achse, die Unterseite der y-Achse und Skalierung, um das gesamte Viewport abzudecken.
• preserveAspectRatio="MinYMin meet" – Ausrichtung auf die linke Seite der x-Achse, die Oberseite der y-Achse und Skalierung, während die gesamte viewBox sichtbar bleibt.

Tom Miller geht noch einen Schritt weiter, indem er overflow: visible in CSS und ein enthaltendes Element verwendet, um "Stage Left" und "Stage Right" anzuzeigen, während die Höhe begrenzt bleibt.

Für responsive SVG-Animationen kann es praktisch sein, die SVG-Viewbox zu nutzen, um eine Ansicht zu erstellen, die unterhalb einer bestimmten Browserbreite zugeschnitten und skaliert wird, und gleichzeitig mehr von der SVG-Animation rechts und links anzuzeigen, wenn der Browser breiter als dieser Schwellenwert ist. Dies erreichen wir, indem wir auf der SVG overflow visible hinzufügen und sie mit einem max-height Wrapper kombinieren, um zu verhindern, dass das SVG vertikal zu stark skaliert.

Fließende Skalierung von Canvas

Canvas ist für komplexe Animationen mit vielen bewegten Teilen performanter als die Animation von SVG oder HTML DOM, aber es ist auch von Natur aus komplexer. Sie müssen sich die Leistungsgewinne verdienen! Im Gegensatz zu SVG, das sofort schöne reaktionsfähige Einheiten und Skalierung bietet, muss <canvas> etwas mehr dirigiert und mikromanagt werden.

Ich richte mein <canvas> gerne so ein, dass es ähnlich wie SVG funktioniert (vielleicht bin ich voreingenommen) mit einem schönen Einheitensystem zum Arbeiten und einem festen Seitenverhältnis. <canvas> muss auch jedes Mal neu gezeichnet werden, wenn sich etwas ändert. Denken Sie also daran, das Neuzeichnen bis zum Ende der Browser-Größenänderung zu verzögern oder zu debouncen!

George Francis hat auch diese nette kleine Bibliothek zusammengestellt, die es Ihnen ermöglicht, ein Canvas-viewBox-Attribut und preserveAspectRatio zu definieren – genau wie bei SVG!

Gezielte Animation

Manchmal müssen Sie einen weniger fließenden und direkteren Ansatz für Ihre Animation wählen. Mobile Geräte haben deutlich weniger Platz und weniger Leistung für Animationen als Desktop-Computer. Daher ist es sinnvoll, mobilen Nutzern reduzierte Animationen anzubieten, möglicherweise sogar gar keine Animation.

Manchmal ist die beste responsive Animation für Mobilgeräte gar keine Animation! Für die mobile UX ist es am besten, dem Benutzer zu ermöglichen, Inhalte schnell zu konsumieren, anstatt auf das Ende von Animationen zu warten. Mobile Animationen sollten Inhalte, Navigation und Interaktionen verbessern, anstatt sie zu verzögern. Eric van Holtz

Dazu können wir Media Queries verwenden, um spezifische Viewport-Größen anzusprechen, genau wie wir es beim Stylen mit CSS tun! Hier ist eine einfache Demo, die eine CSS-Animation zeigt, die mit Media Queries behandelt wird, und eine GSAP-Animation, die mit gsap.matchMedia() behandelt wird.

Die Einfachheit dieser Demo verbirgt viel Magie! JavaScript-Animationen erfordern etwas mehr Einrichtung und Bereinigung, um korrekt nur für eine bestimmte Bildschirmgröße zu funktionieren. Ich habe schon Schreckliches erlebt, bei dem Leute die Animationen einfach per CSS mit opacity: 0 versteckt haben, aber die Animation lief im Hintergrund immer noch und verbrauchte Ressourcen. 😱

Wenn die Bildschirmgröße nicht mehr übereinstimmt, muss die Animation beendet und für die Speicherbereinigung freigegeben werden, und die von der Animation betroffenen Elemente müssen von allen durch die Bewegung eingeführten Inline-Stilen befreit werden, um Konflikte mit anderem Styling zu vermeiden. Bis zu gsap.matchMedia() war dies ein fummeliger Prozess. Wir mussten jede Animation verfolgen und all dies manuell verwalten.

gsap.matchMedia() ermöglicht es Ihnen stattdessen, Ihren Animationscode einfach in eine Funktion zu packen, die nur ausgeführt wird, wenn eine bestimmte Media Query übereinstimmt. Wenn sie dann nicht mehr übereinstimmt, werden alle GSAP-Animationen und ScrollTriggers in dieser Funktion automatisch rückgängig gemacht. Die Media Query, in die die Animationen eingefügt werden, erledigt die ganze Arbeit für Sie. Sie ist in GSAP 3.11.0 enthalten und ist ein Game-Changer!

Wir sind nicht nur auf Bildschirmgrößen beschränkt. Es gibt eine Menge von Medienfunktionen da draußen, mit denen man sich verbinden kann!

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

In der folgenden Demo haben wir eine Prüfung auf prefers-reduced-motion hinzugefügt, damit Benutzer, die Animationen als desorientierend empfinden, nicht durch herumflitzende Dinge gestört werden.

Und sehen Sie sich Tom Millers andere lustige Demo an, in der er das Seitenverhältnis des Geräts verwendet, um die Animation anzupassen.

Denken außerhalb der Box, jenseits von Bildschirmgrößen

Es steckt mehr dahinter, über responsive Animation nachzudenken, als nur Bildschirmgrößen. Unterschiedliche Geräte ermöglichen unterschiedliche Interaktionen, und es ist leicht, sich zu verheddern, wenn man das nicht berücksichtigt. Wenn Sie Hover-States in CSS erstellen, können Sie die hover-Medienfunktion verwenden, um zu testen, ob der primäre Eingabemechanismus des Benutzers über Elemente hovern kann.

@media (hover: hover) {
 /* CSS hover state here */
}

Ein Ratschlag von Jake Whiteley

Oft basieren wir unsere Animationen auf der Browserbreite und treffen die naive Annahme, dass Desktop-Benutzer Hover-States wollen. Ich persönlich hatte in der Vergangenheit viele Probleme, bei denen ich zum Desktop-Layout >1024px wechselte, aber vielleicht Touch-Erkennung in JS machte – was zu einer Diskrepanz führte, bei der das Layout für Desktops war, aber das JS für Handys. Heutzutage setze ich auf Hover und Pointer, um Parität zu gewährleisten und iPad Pros oder Windows Surfaces zu handhaben (die den Pointer-Typ ändern können, je nachdem, ob die Hülle unten ist oder nicht).

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Dann kombiniere ich meine CSS-Layout-Abfragen und meine JavaScript-Abfragen, sodass ich das Eingabegerät als primären Faktor betrachte, der von der Breite unterstützt wird, anstatt umgekehrt.

ScrollTrigger-Tipps

Wenn Sie das ScrollTrigger-Plugin von GSAP verwenden, gibt es ein praktisches kleines Hilfsmittel, mit dem Sie die Touch-Fähigkeiten des Geräts leicht erkennen können: ScrollTrigger.isTouch.

• 0 – kein Touch (nur Pointer/Maus)
• 1 – nur Touch Gerät (wie ein Telefon)
• 2 – Gerät kann Touch-Eingabe und Maus/Pointer akzeptieren (wie Windows Tablets)

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

Ein weiterer Tipp für responsive Scroll-gesteuerte Animationen...

Die folgende Demo unten verschiebt eine Bildergalerie horizontal, aber die Breite ändert sich je nach Bildschirmgröße. Wenn Sie den Bildschirm vergrößern, während Sie sich mitten in einer gescrubten Animation befinden, können Sie kaputte Animationen und veraltete Werte erhalten. Dies ist eine häufige Geschwindigkeitsbremse, die aber leicht zu lösen ist! Packen Sie die von der Bildschirmgröße abhängige Berechnung in einen funktionalen Wert und setzen Sie invalidateOnRefresh:true. Auf diese Weise berechnet ScrollTrigger diesen Wert bei Größenänderung des Browsers neu für Sie.

Bonus GSAP Nerd-Tipp!

Auf Mobilgeräten wird die Browser-Adressleiste beim Scrollen normalerweise angezeigt und ausgeblendet. Dies zählt als Resize-Event und löst ein ScrollTrigger.refresh() aus. Dies ist möglicherweise nicht ideal, da es zu Sprüngen in Ihrer Animation führen kann. GSAP 3.10 fügte ignoreMobileResize hinzu. Es beeinträchtigt nicht das Verhalten der Browserleiste, verhindert aber, dass ScrollTrigger.refresh() für kleine vertikale Größenänderungen auf reinen Touch-Geräten ausgelöst wird.

ScrollTrigger.config({
  ignoreMobileResize: true
});

Bewegungsprinzipien

Ich dachte, ich hinterlasse Ihnen einige Best Practices, die Sie bei der Arbeit mit Bewegung im Web berücksichtigen sollten.

Distanz und Timing-Funktion

Eine kleine, aber wichtige Sache, die man bei responsiven Animationen leicht vergessen kann, ist die Beziehung zwischen Geschwindigkeit, Schwung und Distanz! Gute Animationen sollten die reale Welt nachahmen, um glaubwürdig zu wirken, und es dauert in der realen Welt länger, um eine größere Distanz zurückzulegen. Achten Sie auf die Distanz, die Ihre Animation zurücklegt, und stellen Sie sicher, dass die verwendete Dauer und das Timing im Kontext mit anderen Animationen sinnvoll sind.

Sie können Elementen mit weiter zu reisen oft auch eine dramatischere Beschleunigung beimessen, um den erhöhten Schwung zu zeigen.

Für bestimmte Anwendungsfälle kann es hilfreich sein, die Dauer dynamischer basierend auf der Bildschirmbreite anzupassen. In der nächsten Demo nutzen wir gsap.utils, um den Wert, den wir von der aktuellen window.innerWidth erhalten, in einen vernünftigen Bereich zu klemmen, dann mappen wir diese Zahl auf eine Dauer.

Abstand und Menge

Eine weitere Sache, die man bedenken sollte, ist der Abstand und die Menge der Elemente bei unterschiedlichen Bildschirmgrößen. Zitat von Steven Shaw

Wenn Sie eine Art Umgebungsanimation haben (Parallax, Wolken, Bäume, Konfetti, Dekorationen usw.), die um das Fenster herum angeordnet sind, stellen Sie sicher, dass sie je nach Bildschirmgröße skaliert und/oder die Menge angepasst wird. Große Bildschirme benötigen wahrscheinlich mehr Elemente, die über den ganzen Bereich verteilt sind, während kleine Bildschirme nur wenige für den gleichen Effekt benötigen.

Ich liebe es, wie Opher Vishnia Animation als Bühne betrachtet. Das Hinzufügen und Entfernen von Elementen muss nicht nur eine Formalität sein, es kann Teil der gesamten Choreografie sein.

Bei der Gestaltung responsiver Animationen besteht die Herausforderung nicht darin, die gleichen Inhalte in das Viewport zu quetschen, damit sie „passen“, sondern darin, die Menge der vorhandenen Inhalte so zu kuratieren, dass sie die gleiche Absicht kommunizieren. Das bedeutet, eine bewusste Entscheidung darüber zu treffen, welche Inhaltsstücke hinzugefügt und welche entfernt werden sollen. Normalerweise poppen Dinge in der Welt der Animation nicht einfach ins Bild oder aus dem Bild. Es ist sinnvoll, Elemente als Ein- oder Austreten von der „Bühne“ zu betrachten und diesen Übergang so zu animieren, dass er visuell und thematisch sinnvoll ist.

Und das war's. Wenn Sie weitere Tipps für responsive Animationen haben, fügen Sie sie in den Kommentarbereich ein. Wenn etwas super hilfreich ist, werde ich es diesem Kompendium an Informationen hinzufügen!

Nachtrag

Eine weitere Anmerkung von Tom Miller, als ich diesen Artikel vorbereitet habe.

Ich bin wahrscheinlich zu spät mit diesem Tipp für Ihren Artikel über responsive Animationen, aber ich empfehle dringend, "alle Animationen vor dem Bau zu finalisieren". Ich rüste derzeit einige Website-Animationen mit "mobilen Versionen" nach. Gott sei Dank für gsap.matchMedia… aber ich wünschte, wir hätten von Anfang an gewusst, dass es separate mobile Layouts/Animationen geben würde.

Ich denke, wir alle schätzen, dass dieser Tipp zum "vorausschauenden Planen" ganz am Ende kam. Danke, Tom, und viel Glück bei diesen Nachrüstungen.