Leitfaden / Artikel

Nahtlose Seitenübergänge im Webflow mit Lottie

IVG
Januar 28, 2021
Nahtlose Seitenübergänge im Webflow mit Lottie

Hallo liebe Webflowers!

Ich möchte ein großartiges Feature, das wir jetzt, da Webflow die Lottie-Integration veröffentlicht hat, nutzen können.

Zuerst möchte ich einen Ausruf an super hilfreiche und reaktionsfähige Webflow-Mitarbeiter aussprechen (@sabanna & @tai) und zu Jeandcc die alle dazu beigetragen haben, dies zu verwirklichen.

Ich denke, das wird eine ganze Reihe von Leuten glücklich machen (hoffe ich) - ein einfacher Weg, um ganzseitige animierte Übergänge mit der eingebauten Lottie-Funktionalität von Webflow und mit smoothstate.js zu integrieren - eine Bibliothek, die makellose Seitenübergänge ermöglicht (also kein Flackern beim Seitenwechsel).

Ich habe ein freies Template von Webflow verwendet und die Übergänge und smoothstate.js darin integriert.

Du machst Folgendes:

Teil I - Einrichten der Seiten für die Arbeit mit smoothstate.js:

  • Erstellen Sie ein div lassen Sie es Content-Container nennen und platzieren Sie es an der Spitze des Körpers. Geben Sie ihm eine Breite von 100vw und eine ID von "main".
  • Platzieren Sie alle Elemente, die Sie auf der Seite haben, im Content-Container in der gleichen Reihenfolge wie sie sind (es sollte sich nichts auf Ihrer Seite ändern)
  • Wiederholen Sie die Schritte i. und ii. auf jeder Seite, auf der Sie einen Übergang haben möchten (und verwenden Sie smoothstate.js)

Teil II - Vorbereitung der Lottie-Animationen

  • Angenommen, Sie haben bereits Ihre Lottie Json's mit einer Vollbild-Übergangsanimation hochgeladen, erstellen Sie ein div, nennen wir es "Transition-Container", geben Sie ihm: height = 0px und width = 0px, und platzieren Sie die Lottie(s) darin und geben Sie den Lotties eine Klasse von "transition" (oder wenn Sie zwei separate verwenden, verwenden Sie zwei separate Klassen - "transition-onLoad" und "transition-onExit" - wird es später einfacher machen, wenn Sie die IX2-Animationen machen müssen)
  • Die Animation, die Sie haben - wird skaliert und bleibt im gleichen Seitenverhältnis, wie sie erstellt wurde, also um sie bildschirmfüllend zu machen (unabhängig vom Seitenverhältnis, gehen Sie zu den Lottie-Animationseinstellungen (das Zahnradsymbol im Designer) und fügen Sie das folgende "Custom
  • Attribut: Name Datenerhalt-Aspekt-Verhältnis Wert keine
  • Setzen Sie folgende Positionierung auf "transition" (oder ggf. transition-onLoad und transition-onExit): display = hidden; width = 100vw; height = 100vh; position = fixed; z-index = 9999 (oder wie hoch Sie wollen, solange es über allem steht)

Teil III - Vorbereiten der versteckten Schaltflächen

  • Erstellen Sie zwei Divs - nennen Sie sie "Button-Page-Load" und "Button-Page-Exit" und geben Sie ihnen Höhe = 0px und Breite = 0px
  • Für jede der Schaltflächen müssen Sie eine IX2-Animation erstellen. Hier hängt alles davon ab, ob Sie (i) 1 Lottie-Animation, die 0%-100 geht und dann Ihre Reverse es 100%-0% oder (ii) wenn Sie 2 Animationen verwenden werden, die beide 0%-100% laufen.
Оption (i):
  • machen Sie Ihre onLoad Animation wie folgt -
    * lottie Animation - auf 100% setzen; Anfangszustand setzen
    * hide/show - auf display=block setzen; als "Anfangszustand" setzen
    * lottie Animation - auf 100% setzen und Ihre Dauer wählen (aber merken Sie sich das - Sie werden es später brauchen)
    * hide/show - auf display=none setzen
  • machen Sie Ihre onExit-Animation wie folgt -
    * ausblenden/einblenden - setzen Sie auf display=block; setzen Sie sie NICHT als "Ausgangszustand"
    * lottie Animation - setzen Sie auf 0% und wählen Sie Ihre Dauer
  • -NB Stellen Sie sicher, dass Sie "Klasse" und "alle Elemente mit dieser Klasse" betreffen
  • Option (ii) würde etwas stärker involviert sein
  • (aber nicht viel)
  • Machen Sie Ihre onLoad-Animation wie folgt:
    * hide/show - setzen Sie auf display=block; setzen Sie als "Anfangszustand"
    * lottie Animation - setzen Sie auf 100% und wählen Sie Ihre Dauer (aber merken Sie sie sich - Sie werden sie später brauchen)
    * hide/show - setzen Sie auf display=none
    * lottie Animation - setzen Sie auf 0% und 0 Dauer (um sie in den Anfangszustand für den nächsten Lauf zurückzubringen
  • Machen Sie Ihre onExit-Animation auf die gleiche Weise
    * hide/show - setzen Sie auf display=block; setzen Sie sie als "Ausgangszustand"
    * lottie Animation - setzen Sie auf 100% und wählen Sie Ihre Dauer (aber merken Sie sich das - Sie werden sie später brauchen)
    * hide/show - setzen Sie auf display=none
    * lottie Animation - setzen Sie auf 0% und 0 Dauer (um sie für den nächsten Lauf in den Ausgangszustand zurückzuversetzen
  • *NB Stellen Sie sicher, dass Sie "Klasse" und "alle Elemente mit dieser Klasse" betreffen
  • dem richtigen Button die richtige Animation zuweisen
  • - selbsterklärend, aber ich kann nicht sagen, wie oft ich die falsche Animation für die falsche Taste ausgewählt hatte
  • wählen Sie Transition-Container und machen Sie es in ein Symbol - wird es einfacher zu replizieren auf jeder Seite, die Sie haben.
  • Wiederholen Sie die gleiche Struktur auf jeder Seite, genau wie Sie es in Teil I getan haben - Ihre endgültige Struktur sollte die sein: Transition-Container Symbol und darunter Content-Container mit Ihrem Seitenmaterial.

Teil - IV Setzen Sie den benutzerdefinierten Code - der letzte Teil und der einfachste!

  • Gehen Sie zu den "custom code" Einstellungen Ihres Projektes und fügen Sie den folgenden Code in den "Footer Code" Bereich ein:



   $(function() {
       $('#main').smoothState({
         onStart: {
           duration: 2400,
           render:function($currentTarget, $container)  {$(".button-page-exit").click()},
         },
         onAfter: function($container, $newContent) {$(".button-page-load").click(); Webflow.ready()},
       });
     });
//  $(".button-page-load").click()  //  if you want the "onLoad" transition to run on first load uncomment this line
 
  • Erinnern Sie sich, dass Sie Ihre Animationsdauer benötigen? Benutzen Sie ihn (in Millisekunden - 1sec=1000msec) und fügen Sie ihn an der entsprechenden Stelle in den Code ein (Dauer: XXXX,).

Veröffentlichen Sie und Sie sind fertig! Sie können zu Ihrer veröffentlichten Seite gehen und Ihre ganze Seite lottie animiert und smoothstate aktiviert butterweiche Seitenübergänge genießen!

Hier ist ein Link zu der von mir erstellten Demo 7 Seite

IVG
Januar 28, 2021

Empfangen Sie Webflow-Ressourcen direkt in Ihre Mailbox.

Melden Sie sich an, um wöchentliche Einblicke und Inspirationen in Ihrem Posteingang zu erhalten.

ANDERE ANLEITUNGEN & LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.