Responsive Animationen für jede Bildschirmgröße und jedes Gerät

Bevor ich in die Entwicklung einstieg, habe ich in After Effects eine Reihe von Motion Graphics-Arbeiten durchgeführt. Aber selbst mit diesem Hintergrund fand ich Animationen im Web immer noch ziemlich verwirrend.

Videografiken werden innerhalb eines bestimmten Verhältnisses entworfen und dann exportiert. Fertig! Aber es gibt keine "Exporteinstellungen" im Web. Wir schieben den Code einfach in die Welt hinaus und unsere Animationen müssen sich an das Gerät anpassen, auf dem sie landen.

Reden wir also über responsive Animation! Wie gehen wir am besten an die Animation im Wild Wild Web heran? Wir werden einige allgemeine Ansätze, einige GSAP-spezifische Tipps und einige Bewegungsprinzipien behandeln. Beginnen wir mit etwas Rahmung…

Wie wird diese Animation verwendet?

Zach Sauciers Artikel über responsive Animation empfiehlt, einen Schritt zurückzutreten, um über das Endergebnis nachzudenken, bevor Sie mit dem Code beginnen.

Wird die Animation ein Modul sein, das in mehreren Teilen Ihrer Anwendung wiederholt wird? Muss es überhaupt skaliert werden? Wenn Sie dies im Hinterkopf behalten, können Sie die Methode bestimmen, mit der eine Animation skaliert werden sollte, und Sie vor unnötigem Aufwand bewahren.

Das ist ein toller Rat. EIN riesig Ein Teil des Designs responsiver Animationen besteht darin, zu wissen, ob und wie diese Animation skaliert werden muss, und dann von Anfang an den richtigen Ansatz zu wählen.

Die meisten Animationen fallen in die folgenden Kategorien:

• Fixed: Animationen für Dinge wie Symbole oder Loader, die auf allen Geräten dieselbe Größe und dasselbe Seitenverhältnis beibehalten. Hier gibt es nichts zu befürchten! Codieren Sie dort einige Pixelwerte fest und machen Sie mit Ihrem Tag weiter.
• Flüssigkeit: Animationen, die sich flüssig auf verschiedenen Geräten 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 Haltepunkt erheblich ändern, wie z.

Flüssige und zielgerichtete Animationen erfordern unterschiedliche Denkweisen und Lösungen. Lass uns einen Blick darauf werfen…

Flüssige Animation

As Andy Glocke sagt: Seien Sie der Mentor des Browsers, nicht sein Mikromanager – geben Sie dem Browser einige 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.)

Bei flüssigen Animationen geht es darum, den Browser die harte Arbeit erledigen zu lassen. Viele Animationen lassen sich leicht an unterschiedliche Kontexte anpassen, indem Sie von Anfang an die richtigen Einheiten verwenden. Wenn Sie die Größe dieses Stifts ändern, können Sie sehen, dass die Animation verwendet wird Ansichtsfenster-Einheiten skaliert fließend, wenn sich der Browser anpasst:

Das violette Kästchen ändert sogar seine Breite an verschiedenen Haltepunkten, aber da wir Prozentsätze verwenden, um es zu verschieben, skaliert auch die Animation damit.

Animierende Layouteigenschaften wie left und top kann zu Layoutumbrüchen und zittrigen „ruckelnden“ Animationen führen, also bleiben Sie nach Möglichkeit bei Transformationen und Opazität.

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 an der Arbeit mit SVG liebe, ist, dass wir SVG-Benutzereinheiten für Animationen verwenden können, die sofort reaktionsfähig sind. Der Hinweis liegt wirklich im Namen – Skalierbar Vektorgrafik. Im SVG-Land werden alle Elemente an bestimmten Koordinaten geplottet. Der SVG-Raum ist wie ein unendliches Stück Millimeterpapier, auf dem wir Elemente anordnen können. Das viewBox definiert die Abmessungen des Millimeterpapiers, das wir sehen können.

viewBox="0 0 100 50”

In dieser nächsten Demo wird unser SVG viewBox is 100 Einheiten breit und 50 Einheiten hoch. Das heißt, wenn wir das Element durch animieren 100 Einheiten entlang der x-Achse bewegt es sich immer um die gesamte Breite seines übergeordneten SVG, egal wie groß oder klein dieses SVG ist! Geben Sie der Demo eine Größenänderung, um sie anzuzeigen.

Das Animieren eines untergeordneten Elements basierend auf der Breite eines übergeordneten Containers ist ein kleiner Trick im HTML-Land. Bisher mussten wir die Breite des übergeordneten Elements mit JavaScript abrufen, was beim Animieren einfach genug ist from eine transformierte Position, aber ein wenig fummeliger, wenn Sie animieren to irgendwo, wie Sie in der folgenden Demo sehen können. Wenn Ihr Endpunkt eine transformierte Position ist und Sie die Größe des Bildschirms ändern, müssen Sie diese Position manuell anpassen. Unordentlich… 🤔

Wenn Sie die Werte bei der Größenänderung anpassen, denken Sie daran entprellen, oder lösen Sie die Funktion sogar aus, nachdem die Größenänderung des Browsers abgeschlossen ist. Größenänderungs-Listener lösen jede Sekunde eine Menge Ereignisse aus, sodass das Aktualisieren von Eigenschaften bei jedem Ereignis eine Menge Arbeit für den Browser bedeutet.

Aber diese Animations-Geschwindigkeitsschwelle wird bald der Vergangenheit angehören! Trommelwirbel bitte… 🥁

Nach fast 15 Jahren als stark nachgefragtes (unmögliches!?) Feature wurden größenbasierte Containerabfragen und -einheiten sowohl in Chrome/Edge 105 als auch in Safari 16 ausgeliefert! Firefox ist nicht weit dahinter.

(auch: es gibt einen Prototyp von Stilabfragen!)https://t.co/A2zgd9l4FC

– Mia (@TerribleMia) 15. September 2022

Containereinheiten! Schönes Zeug. Zum Zeitpunkt, an dem ich dies schreibe, funktionieren sie nur in Chrome und Safari – aber vielleicht haben wir, wenn Sie dies lesen, auch Firefox. Testen Sie sie in dieser nächsten Demo in Aktion. Schau dir diese kleinen Burschen an! Ist das nicht aufregend, Animation, die relativ zu den übergeordneten Elementen ist!

Fließende Layoutübergänge mit FLIP

Wie wir bereits erwähnt haben, ist im SVG-Land jedes Element ordentlich auf einem Raster platziert und kann wirklich leicht reaktionsschnell verschoben werden. Drüben im HTML-Land ist es viel komplexer. Um ansprechende Layouts zu erstellen, verwenden wir eine Reihe verschiedener Positionierungsmethoden und Layoutsysteme. Eine der Hauptschwierigkeiten beim Animieren im Web ist das viel Änderungen am Layout sind unmöglich zu animieren. Vielleicht muss ein Element von der Position verschoben werden relative zu fixed, oder einige untergeordnete Elemente eines Flex-Containers müssen reibungslos im Ansichtsfenster verschoben werden. Vielleicht muss ein Element sogar neu übergeordnet und an eine völlig neue Position im DOM verschoben werden.

Heikel, oder?

Brunnen. Die FLIP-Technik ist hier, um den Tag zu retten; es erlaubt uns, diese unmöglichen Dinge einfach zu animieren. Die Grundvoraussetzung ist:

• Vorname: Erfassen Sie die Anfangsposition der am Übergang beteiligten Elemente.
• Nachname: Bewegen Sie die Elemente und greifen Sie die endgültige Position.
• Umkehren: Berechnen Sie die Änderungen zwischen dem ersten und letzten Zustand und wenden Sie Transformationen an, um die Elemente wieder in ihre ursprüngliche Position zu bringen. Dadurch sieht es so aus, als wären die Elemente noch in der zuerst Position, aber sie sind es eigentlich nicht.
• Play: Entfernen Sie die invertierten Transformationen und animieren Sie sie gefälscht zuerst Staat zu den letzte Zustand.

Hier ist eine Demo mit dem FLIP-Plug-in von GSAP, das die ganze Arbeit für Sie erledigt!

Wenn Sie etwas mehr über die Vanilla-Implementierung erfahren möchten, gehen Sie zu Paul Lewis Blog-Post — er ist der Kopf hinter der FLIP-Technik.

Fließend skalierendes SVG

Du hast mich … das ist es nicht wirklich ein Animationstipp. Aber für eine gute Animation ist es unerlässlich, die Bühne richtig zu inszenieren! SVG skaliert standardmäßig super gut, aber wir können steuern, wie es noch weiter skaliert wird preserveAspectRatio, was mega praktisch ist, wenn das Seitenverhältnis des SVG-Elements und die viewBox Seitenverhältnis sind unterschiedlich. Es funktioniert sehr ähnlich wie die background-position und background-size Eigenschaften in CSS. Die Deklaration besteht aus einem Ausrichtungswert (background-position) Und eine Triff or Slice Referenz (background-size).

Was diese Meet-and-Slice-Referenzen betrifft – slice ist wie background size: cover und meet ist wie background-size: contain.

• preserveAspectRatio="MidYMax slice" — An der Mitte der x-Achse, am unteren Rand der y-Achse ausrichten und vergrößern, um das gesamte Ansichtsfenster abzudecken.
• preserveAspectRatio="MinYMin meet" — Links von der x-Achse, oben auf der y-Achse ausrichten und vergrößern, während das Ganze erhalten bleibt viewBox sichtbar

Tom Miller geht noch einen Schritt weiter, indem es verwendet overflow: visible in CSS und ein enthaltendes Element, um „Bühne links“ und „Bühne rechts“ anzuzeigen, während die Höhe beschränkt bleibt:

Für reaktionsschnelle SVG-Animationen kann es praktisch sein, die SVG-Ansichtsbox zu verwenden, um eine Ansicht zu erstellen, die unterhalb einer bestimmten Browserbreite zugeschnitten und skaliert wird, während auch rechts und links mehr von der SVG-Animation angezeigt wird, wenn der Browser breiter ist Schwelle. Wir können dies erreichen, indem wir einen auf dem SVG sichtbaren Überlauf hinzufügen und ihn mit a kombinieren max-height Wrapper, um zu verhindern, dass das SVG vertikal zu stark skaliert.

Leinwand flüssig skalieren

Canvas ist viel performanter für komplexe Animationen mit viel von beweglichen Teilen als das Animieren von SVG oder HTML DOM, aber es ist von Natur aus auch komplexer. Sie müssen für diese Leistungssteigerungen arbeiten! Im Gegensatz zu SVG, das schöne reaktionsschnelle Einheiten hat und sofort skaliert werden kann, muss herumkommandiert und ein bisschen mikrogemanagt werden.

Ich mag es, meine einzurichten so dass es ähnlich wie SVG funktioniert (ich bin vielleicht voreingenommen) mit einem schönen Einheitensystem zum Arbeiten und einem festen Seitenverhältnis. muss auch jedes Mal neu gezeichnet werden, wenn sich etwas ändert, denken Sie also daran, das Neuzeichnen zu verzögern, bis die Größenänderung des Browsers abgeschlossen ist, oder entprellen!

George Francis stell das auch zusammen schöne kleine Bibliothek mit dem Sie eine Leinwand definieren können viewBox Attribut und preserveAspectRatio — genau wie SVG!

Gezielte Animation

Möglicherweise müssen Sie manchmal einen weniger flüssigen und gezielteren Ansatz für Ihre Animation wählen. Mobile Geräte haben viel weniger Platz und weniger Animationssaft in Bezug auf die Leistung als ein Desktop-Computer. Daher ist es sinnvoll, mobilen Nutzern reduzierte Animationen anzubieten, möglicherweise sogar keine Animationen:

Manchmal ist die beste reaktionsschnelle Animation für Mobilgeräte überhaupt keine Animation! Priorisieren Sie für mobile UX, dass der Benutzer Inhalte schnell konsumieren kann, anstatt darauf zu warten, dass Animationen abgeschlossen werden. Mobile Animationen sollten Inhalt, Navigation und Interaktionen verbessern, anstatt sie zu verzögern. Eric van Holtz

Um dies zu tun, können wir Medienabfragen verwenden, um auf bestimmte Viewport-Größen abzuzielen, genau wie beim Stylen mit CSS! Hier ist eine einfache Demo, die eine CSS-Animation zeigt, die mit Medienabfragen und einer GSAP-Animation behandelt wird gsap.matchMedia():

Die Einfachheit dieser Demo verbirgt eine Menge Magie! JavaScript-Animationen erfordern etwas mehr Einrichtung und Bereinigung, um nur bei einer bestimmten Bildschirmgröße korrekt zu funktionieren. Ich habe in der Vergangenheit Schrecken gesehen, wo Leute die Animation einfach in CSS ausgeblendet haben opacity: 0, aber die Animation tuckert immer noch im Hintergrund und verbraucht Ressourcen. 😱

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

gsap.matchMedia() Stattdessen können Sie Ihren Animationscode einfach in eine Funktion stecken, die nur ausgeführt wird, wenn eine bestimmte Medienabfrage Streichhölzer. Dann, wenn es nicht mehr passt, alle GSAP-Animationen und ScrollTriggers in dieser Funktion werden automatisch zurückgesetzt. Die Medienabfrage, in die die Animationen eingefügt werden, erledigt die ganze harte Arbeit für Sie. Es ist in GSAP 3.11.0 und es ist ein Game Changer!

Wir sind auch nicht nur auf Bildschirmgrößen beschränkt. Es gibt ein tonnenweise Medienfunktionen da draußen einzuhaken!

(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 Überprüfung für hinzugefügt prefers-reduced-motion damit alle Benutzer, die Animationen als verwirrend 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:

Über den Tellerrand hinaus denken, über Bildschirmgrößen hinaus

An reaktionsschnelle Animationen muss mehr gedacht werden als nur an Bildschirmgrößen. Unterschiedliche Geräte ermöglichen unterschiedliche Interaktionen, und es ist leicht, ein wenig durcheinander zu geraten, wenn Sie das nicht berücksichtigen. Wenn Sie Hover-Zustände in CSS erstellen, können Sie die verwenden hover Medienfunktion, um zu testen, ob der Benutzer primär Eingabemechanismus kann über Elementen schweben.

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

Einige Ratschläge von Jake Whiteley:

Oft basieren unsere Animationen auf der Browserbreite und gehen von der naiven Annahme aus, dass Desktop-Benutzer Hover-Zustände wünschen. Ich persönlich hatte in der Vergangenheit viele Probleme, bei denen ich zu einem Desktop-Layout > 1024 Pixel wechselte, aber möglicherweise eine Berührungserkennung in JS durchführte – was zu einer Nichtübereinstimmung führte, wenn das Layout für Desktops, das JS jedoch für Mobiltelefone war. Heutzutage stütze ich mich auf Hover und Pointer, um Parität zu gewährleisten und iPad Pros oder Windows-Oberflächen zu handhaben (die den Zeigertyp ändern können, je nachdem, ob die Abdeckung heruntergeklappt ist oder nicht).

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

Ich werde dann meine CSS-Layout-Abfragen und meine JavaScript-Abfragen verheiraten, sodass ich das Eingabegerät als primären Faktor betrachte unterstützt nach Breite, eher als das Gegenteil.

ScrollTrigger-Tipps

Wenn Sie GSAPs verwenden ScrollTrigger-Plugin, gibt es ein praktisches kleines Dienstprogramm, in das Sie sich einklinken können, um die Touch-Fähigkeiten des Geräts einfach zu erkennen: ScrollTrigger.isTouch.

• 0 - Keine Berührung (nur Zeiger/Maus)
• 1 - nur berühren Gerät (wie ein Telefon)
• 2 – Gerät kann akzeptieren aufnehmen Eingabe und Mauszeiger (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 reaktionsschnelle durch Scrollen ausgelöste Animationen …

Die folgende Demo unten verschiebt eine Bildergalerie horizontal, aber die Breite ändert sich je nach Bildschirmgröße. Wenn Sie die Größe des Bildschirms ändern, wenn Sie eine gesäuberte Animation zur Hälfte durchlaufen haben, kann dies zu fehlerhaften Animationen und veralteten Werten führen. Das ist ein gewöhnlicher Speedbump, aber einer, der leicht zu lösen ist! Setzen Sie die von der Bildschirmgröße abhängige Berechnung in einen funktionalen Wert und legen Sie ihn fest invalidateOnRefresh:true. Auf diese Weise berechnet ScrollTrigger diesen Wert für Sie neu, wenn die Größe des Browsers geändert wird.

Bonus-GSAP-Nerd-Tipp!

Auf Mobilgeräten wird die Adressleiste des Browsers normalerweise beim Scrollen ein- und ausgeblendet. Dies zählt als Größenänderungsereignis und löst a aus ScrollTrigger.refresh(). Dies ist möglicherweise nicht ideal, da es zu Sprüngen in Ihrer Animation führen kann. GSAP 3.10 hinzugefügt ignoreMobileResize. Es hat keinen Einfluss darauf, wie sich die Browserleiste verhält, aber es verhindert ScrollTrigger.refresh() vom Schießen für kleine vertikale Größenänderungen auf reinen Touch-Geräten.

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.

Abstand und Lockerung

Eine kleine, aber wichtige Sache, die man bei reaktionsschnellen Animationen leicht vergisst, ist die Beziehung zwischen Geschwindigkeit, Schwung und Distanz! Gute Animation sollte die reale Welt nachahmen sich glaubwürdig zu fühlen, und es dauert in der realen Welt länger, eine größere Distanz zurückzulegen. Achten Sie auf die Entfernung, die Ihre Animation zurücklegt, und stellen Sie sicher, dass die verwendete Dauer und Beschleunigung im Kontext mit anderen Animationen sinnvoll sind.

Sie können auch oft eine dramatischere Beschleunigung auf Elemente anwenden, die weiter zu bewegen sind, um die erhöhte Dynamik zu zeigen:

Für bestimmte Anwendungsfälle kann es hilfreich sein, die Dauer basierend auf der Bildschirmbreite dynamischer anzupassen. In dieser nächsten Demo verwenden wir gsap.utils um den Wert zu klemmen, den wir vom Strom zurückbekommen window.innerWidth in einen vernünftigen Bereich, dann ordnen wir diese Zahl einer Dauer zu.

Abstand und Menge

Eine weitere zu beachtende Sache ist der Abstand und die Anzahl der Elemente bei unterschiedlichen Bildschirmgrößen. Zitieren Steven Shaw:

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

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

Beim Entwerfen von reaktionsschnellen Animationen besteht die Herausforderung nicht darin, denselben Inhalt in den Darstellungsbereich zu stopfen, damit er „passt“, sondern darin, den Satz vorhandener Inhalte so zu kuratieren, dass er dieselbe Absicht vermittelt. Das bedeutet, eine bewusste Entscheidung zu treffen, welche Inhalte hinzugefügt und welche entfernt werden sollen. Normalerweise tauchen in der Welt der Animation die Dinge nicht einfach in oder aus dem Bild auf. Es ist sinnvoll, sich Elemente so vorzustellen, dass sie die „Bühne“ betreten oder verlassen, und diesen Übergang auf eine visuell und thematisch sinnvolle Weise zu animieren.

Und das ist die Menge. Wenn Sie weitere Tipps zu reaktionsschnellen Animationen haben, fügen Sie sie im Kommentarbereich ein. Wenn es etwas super Hilfreiches gibt, werde ich es diesem Kompendium an Informationen hinzufügen!

Nachtrag

Noch eine Anmerkung von Tom Miller während ich diesen Artikel vorbereitete:

Ich bin wahrscheinlich zu spät mit diesem Tipp für Ihren Artikel zu responsiven Animationen, aber ich empfehle dringend „alle Animationen vor dem Erstellen fertigstellen“. Ich bin gerade dabei, einige Site-Animationen mit „mobilen Versionen“ nachzurüsten. 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 wissen alle zu schätzen, dass dieser Tipp „vorauszuplanen“ in letzter Minute kam. Danke, Tom, und viel Glück mit diesen Nachrüstungen.