Erstellen Sie wunderschöne Scroll-Animationen mit Framer Motion

Einführung

Scrollen ist etwas, was wir jeden Tag auf unseren Bildschirmen tun, aber haben Sie jemals darüber nachgedacht, wie sich Scrollen auf die Benutzererfahrung auswirkt? In der heutigen Welt ist das Scrollen auch zu einer Möglichkeit geworden, Ihren Benutzern ein reibungsloses und zufriedenstellendes Erlebnis zu bieten. Mit Tools wie Framer Motion können Entwickler das Scrollen in ein ansprechendes und optisch ansprechendes Erlebnis verwandeln.

Heute werden wir verschiedene Möglichkeiten erkunden, das Scrollen zu animieren. Wir lernen die Arten von Scroll-Animationen und deren Verwendung kennen. Wir werden das Muster verstehen, damit wir Scroll-Animationen zu jedem unserer Projekte oder Websites hinzufügen können.

Wir werden Animationen in Next.js mit Framer Motion erstellen. Wenn Sie lieber ein anderes Framework oder eine andere Bibliothek verwenden möchten, können Sie diese verwenden.

Also, ohne weitere Verzögerung, fangen wir an.

Arten von Scroll-Animationen

Es gibt zwei Arten von Scroll-Animationen:

1. Scroll-verknüpfte Animationen: Animationen, die sich je nachdem, wie weit Sie gescrollt haben, bewegen oder ändern. Das Element wird beim Scrollen kontinuierlich aktualisiert.

2. Scroll-ausgelöste Animationen: Eine normale Animation wird ausgelöst, wenn ein Element das Ansichtsfenster betritt oder verlässt.

Mit Framer Motion können Sie beides erreichen. Lassen Sie uns beides einzeln verstehen.

Scroll-verknüpfte Animationen

Scroll-verknüpfte Animationen sind Animationen, bei denen der Fortschritt oder die Bewegung einer Animation direkt davon abhängt, wie weit der Benutzer gescrollt hat. Bei dieser Art von Animation ändern sich die Elemente kontinuierlich, während der Benutzer scrollt.

Das heißt, wenn Sie sich an Punkt eins befinden, wird die Animation Sie verfolgen und auch an Punkt eins sein. Und wenn Sie scrollen und zu Punkt zwei gehen, folgt Ihnen die Animation bis zu diesem Punkt.

Hauptfunktionen

• Die Animation wird synchronisiert mit dem Scroll-Fortschritt.
• Während Sie scrollen, wird die Animation in Echtzeit aktualisiert, je nachdem, wie weit Sie gescrollt haben.
• Diese Animationen können das Verschieben, Skalieren, Drehen oder Ändern des Erscheinungsbilds von Elementen umfassen, normalerweise mithilfe der Hooks „useScroll“ und „useTransform“ (mehr dazu erfahren Sie weiter unten) in Framer Motion.

Durch Scrollen ausgelöste Animation

Durch Scrollen ausgelöste Animationen finden statt, wenn ein Element beim Scrollen in das jeweilige Ansichtsfenster eintritt oder es verlässt. Das bedeutet, dass die Animation nur startet, wenn der Benutzer zu einem bestimmten Teil der Seite scrollt.

Wenn ich also bei Punkt eins bin und eine durch Scrollen ausgelöste Animation für Punkt drei einstelle, wird diese Animation bei Punkt drei auftreten. Das bedeutet, dass die Animation nur ausgelöst wird, wenn ich dieses Ansichtsfenster erreiche (in diesem Fall Punkt drei)

Um das zu verstehen, können Sie sich dieses Video ansehen. Hier sehen Sie, dass das orangefarbene Element, wenn es in einem Ansichtsfenster angezeigt wird, vollständig auf dem Bildschirm sichtbar ist und dann eine Navigationsleiste anzeigt.

Hauptfunktionen

• Ausgelöst durch Scroll-Position: Die Animation wird aktiviert, sobald eine bestimmte Scroll-Position erreicht ist, anstatt kontinuierlich mit dem Scrollen synchronisiert zu werden, wie es bei scroll-verknüpften-Animationen der Fall ist. Dies wird normalerweise durch Bedingungen wie whileInView oder onEnter erreicht.

• Diskrete Animationen: Im Gegensatz zu durch Scrollen verknüpften Animationen erfolgen durch Scrollen ausgelöste Animationen zu bestimmten Zeitpunkten, z. B. wenn ein Element in die Animation eintritt oder diese verlässt Ansichtsfenster. Dazu können Einblendungen, Einblendungen oder andere visuelle Effekte gehören, die einmal auftreten, wenn der Benutzer über einen bestimmten Punkt hinaus scrollt.

• Einmalige oder wiederholbare Animationen: durch Scrollen ausgelöste Animationen können so eingestellt werden, dass sie nur einmal abgespielt werden, wenn das Element zum ersten Mal angezeigt wird, oder sie können immer dann wiederholt werden Das Element gelangt je nach Anwendungsfall erneut in den Ansichtsbereich.
  

  66623306d58a1053688cd78dc392ea42

Was kommt als nächstes?

Jetzt verstehen wir diese beiden Arten von Scroll-Animationen und ihre Unterschiede. Beginnen wir nun mit dem Verständnis der Muster, die bei der Erstellung dieser Animationen verwendet werden. Dadurch können Sie Scroll-Animationen zu jedem Ihrer Projekte hinzufügen.

Zuerst erstellen wir ein Projekt, um dies praktisch zu verstehen, und dann erstellen wir beide Arten von Animationen.

Projekt-Setup

Beginnen wir mit der Einrichtung unseres Next.js-Projekts mit allen notwendigen Abhängigkeiten. Ich werde StalkBlitz für dieses Projekt verwenden, aber Sie können auch VSCode verwenden. Obwohl ich Ihnen alle Schritte aus der VSCode-Perspektive erläutere, damit Sie die Schritte befolgen können.

1. Erstellen Sie ein neues Next.js-Projekt mit TypeScript:
   

   npx create-next-app@latest
   

   Bei der Installation werden die folgenden Eingabeaufforderungen angezeigt:
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

2. Framer Motion installieren
   

     npm install framer-motion
   

3. Standarddateien bereinigen.
   Entfernen Sie den Standardcode in app/page.tsx. Wir fangen ganz von vorne an und konzentrieren uns auf unsere Scroll-Animationen. Die Datei sollte so aussehen.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

4. Starten Sie den Entwicklungsserver
   

     66623306d58a1053688cd78dc392ea42
   
   

Erstellen Sie eine Scroll-Animation

Da unser Projekt nun eingerichtet ist, können wir beide Arten von Scroll-Animationen nacheinander erstellen. Sie können direkt mit dem Schreiben von Code in der Datei app/page.tsx beginnen oder eine separate Komponente erstellen und alle in die Datei app/page.tsx importieren.

Erstellen einer Scroll-Linked-Animation

Es gibt mehrere Beispiele für Scroll-Link-Animationen:

• Scroll-Fortschrittsbalken: Ein kreisförmiger oder linearer Fortschrittsbalken, der sich füllt, wenn der Benutzer auf der Seite nach unten scrollt.

• Parallax Scrolling: Hintergrundbilder oder Elemente bewegen sich mit unterschiedlicher Geschwindigkeit relativ zum Vordergrund, wodurch beim Scrollen ein Tiefeneffekt entsteht.

• Einblendelemente: Der Inhalt wird eingeblendet, wenn der Benutzer scrollt.

• Skalierungstransformationen: Elemente werden je nach Scrollfortschritt schrittweise größer oder kleiner. usw.

Lassen Sie uns einige Animationen erstellen. Beim Erstellen einer scroll-linked-Animation werden Sie häufig diese Methoden und Hooks aus der Framer-Bewegung verwenden.

1. Scroll-Fortschrittserkennung (useScroll): Verfolgt die Scroll-Position des Benutzers und gibt normalerweise einen Wert von 0 bis 1 zurück, der den Fortschritt auf der Seite darstellt.
   

   npx create-next-app@latest
   

2. Bildlaufdaten transformieren (useTransform): Ordnet die Bildlaufposition bestimmten Animationseigenschaften wie Deckkraft, Skalierung oder Position zu. Verwenden Sie dies, um Animationen wie Verblassen, Verschieben, Drehen, Skalieren oder Farbänderungen während des Scrollens auszulösen.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

3. Animieren mit Bewegungselementen: Umschließen Sie Zielelemente mit motion.div (oder einer beliebigen Bewegungskomponente) und verknüpfen Sie die Animation mit dem Scroll-Fortschritt.
   

     npm install framer-motion
   

4. Übergänge: Wenden Sie sanfte Übergänge an, damit sich Animationen flüssig und natürlich anfühlen.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

5. Anfangs- und Endzustand:Verwenden Sie Anfangs-, Animations- oder Stil-Requisiten, um zu definieren, wie Elemente anfänglich aussehen, und steuern Sie ihren Endzustand mit useTransform oder mit scrollYProgress verknüpften Animationen.
   

       npm run dev
   

Fortschrittsbalken scrollen

Wir beginnen mit der Erstellung eines Scroll-Fortschrittsbalkens. Öffnen Sie dazu Ihren Texteditor, erstellen Sie eine neue Komponente und beginnen Sie mit dem Schreiben von Code darin.

   const { scrollYProgress } = useScroll();

Hier haben wir verwendet:

• useScroll: Stellt die Scrollposition als normalisierten Wert zwischen 0 und 1 bereit.

• useTransform: Ordnet den Scroll-Fortschritt den spezifischen Wertebereichen zu, die wir benötigen, sei es für das Strich-Dasharray des Fortschrittskreises oder eine andere Transformation, die wir anwenden möchten.

• Bewegungskomponenten: Wir verwenden Motion.Circle von Framer Motion, um die Strichlänge basierend auf dem Scrollen in Echtzeit zu animieren.

Dynamische Skalierungstextanimation

In diesem Beispiel erstellen wir mithilfe von Framer Motion einen scrollgebundenen dynamischen Skalierungseffekt für ein Textelement.

1. Scroll-Fortschritt verfolgen: Ähnlich wie beim Fortschrittsbalken verwenden wir useScroll(), um den aktuellen Scroll-Fortschritt der Seite abzurufen. Der scrollYProgress-Wert reicht von 0 oben bis 1, wenn vollständig gescrollt ist.
   

     66623306d58a1053688cd78dc392ea42
   
   

2. Umwandeln des Bildlaufwerts in Steuerskalierung: Wir verwenden useTransform(), um den Bildlauffortschritt in einen Skalierungswert umzuwandeln, der sich dynamisch ändert, wenn der Benutzer scrollt. In diesem Fall ordnen wir scrollYProgress von [0, 0,5, 1] ​​den Skalierungswerten [1, 2, 1] zu, was bedeutet, dass der Text von seiner Originalgröße an wächst, sich in der Mitte des Scrolls verdoppelt und dann kleiner wird zurück, wenn Sie unten angekommen sind.
   

   npx create-next-app@latest
   

3. Animieren des Textelements: Innerhalb der Komponente „motion.h1“ verwenden wir den Wert „scaleValue“ für die Eigenschaft „style“, um den Textskalierungseffekt basierend auf der Bildlaufposition sanft zu animieren. Der Text wird „wachsen“ und „verkleinern“, wenn der Benutzer scrollt.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

4. Styling des Abschnitts: Der Text wird in einem Vollbildabschnitt zentriert, der über einen Hintergrundverlauf verfügt, um eine optische Attraktivität zu erzielen. Der Hintergrund erzeugt einen sanften Farbverlauf von Lila zu Indigo, wodurch der dynamische Text besser zur Geltung kommt.
   

     npm install framer-motion
   

Verwendete Konzepte:

• useScroll: Wir verwenden diesen Hook erneut, um den Scroll-Fortschritt der Seite zu verfolgen, der als Auslöser für die Animation dient.

• useTransform: Hier ordnen wir den Scroll-Fortschritt Skalierungswerten zu, sodass der Text während des Scroll-Ereignisses reibungslos wächst oder schrumpft.

• Bewegungskomponenten: Die Motion.h1-Komponente wird in Echtzeit animiert, wobei die Skalierung dynamisch angepasst wird, wenn sich der Bildlaufwert ändert.

Wir haben wieder die gleichen Konzepte verwendet. useScroll useTransform und Bewegung. Das ist also der Teil von scroll-linked. Jetzt erstellen wir einige durch Scrollen ausgelöste Animationen.

Erstellen einer durch Scrollen ausgelösten Animation

Eine durch Scrollen ausgelöste Animation bleibt mit ein paar Beispielen nicht bei der Arbeit. Sie können Scroll-Animationen mit bestimmten Komponenten der Seite verknüpfen. Ich habe zum Beispiel eine Landingpage mit zwei Elementen und einem Div, das etwas Text enthält. Derzeit gibt es keine Animationen auf der Seite, aber ich möchte Animationen hinzufügen, die aktiviert werden, wenn das Ansichtsfenster sichtbar wird.

Hierfür verwenden wir durch Scrollen ausgelöste Animationen. Wie wir bereits erfahren haben, werden durch Scrollen ausgelöste Animationen ausgeführt, wenn ein bestimmtes Ansichtsfenster angezeigt wird. Fügen wir diesem Code also Framer Motion-Elemente hinzu.

  66623306d58a1053688cd78dc392ea42

1. Wir importieren Bewegungen aus Framer-Motion

2. Die gesamte Komponente ist in ein Abschnittselement eingebunden und weist einige grundlegende Stilelemente auf.

3. Das 67b4f758d01b5d98ed51f10e02fa8e80 Das ist der erste Bewegungsabschnitt. Es enthält den Hauptinhalt (eine Überschrift und einen Absatz). Es verwendet initial und whileInView, um eine durch Scrollen ausgelöste Animation zu erstellen:

   initial={{ opacity: 0, y: 50 }}: Anfangs ist das Feld unsichtbar (Opazität: 0) und 50 Pixel nach unten positioniert (y: 50).
   whileInView={{ opacity: 1, y: 0 }}: Wenn der Benutzer es in die Ansicht scrollt, wird es vollständig sichtbar (Opazität: 1) und bewegt sich in seine normale Position (y: 0).
   Transition={{ Dauer: 0.8, Leichtigkeit: 'easeOut' }}: Der Übergang dauert 0,8 Sekunden und verläuft reibungslos.

   Der darin enthaltene Inhalt ist mit Tailwind-Klassen gestaltet und erhält dadurch Polsterung, einen Hintergrund mit 90 % Deckkraft, Schatten, abgerundete Ecken und eine maximale Breite.

4. Danach haben wir einen zweiten Bewegungsabschnitt (von oben nach unten animierter Text). Dieses 67b4f758d01b5d98ed51f10e02fa8e80 animiert Text, der sich vom oberen Bildschirmrand nach unten bewegt:

   initial={{ y: -100, opacity: 0 }}: Der Text beginnt 100 Pixel über seiner normalen Position und ist unsichtbar.
   whileInView={{ y: 0, opacity: 1 }}: Wenn es sichtbar wird, bewegt es sich in seine normale Position und wird vollständig sichtbar.
   Transition={{ Verzögerung: 0,5, Dauer: 0,8 }}: Es gibt eine Verzögerung von 0,5 Sekunden, bevor die Animation beginnt, was zu einem gestaffelten Effekt führt.

Die endgültige Ausgabe sieht so aus.

Abschluss

Das war's für den heutigen Blog. Wir behandeln zwei Arten von Animationen mit einigen Methoden, die beim Erstellen dieser Animationen verwendet werden, wie zum Beispiel: useScroll useTransition whileInView Anfangs- und Endzustände und ähnliches.

Der gesamte Code mit weiteren Animationsbeispielen, die ich in meinem StalkBliz-Projekt hinzugefügt habe. Sie können es sich hier ansehen und weitere Beispiel-Scroll-Animationen mit Code ansehen. Wenn Sie weitere Requisiten, Methoden und Beispiele für Scroll-Animationen erkunden möchten, können Sie sich hier die Scroll-Dokumente von Framer Motion ansehen.

Vielen Dank für das Lesen dieses Blogs. Wenn Sie daraus etwas gelernt haben, liken Sie es bitte und teilen Sie es mit Ihren Freunden und der Community. Ich schreibe Blogs und teile Inhalte zu JavaScript, TypeScript, Open Source und anderen Themen im Zusammenhang mit der Webentwicklung. Folgen Sie mir gerne auf meinen sozialen Netzwerken. Wir sehen uns im nächsten. Danke :)

• Twitter
• LinkedIn
• GitHub

Das obige ist der detaillierte Inhalt vonErstellen Sie wunderschöne Scroll-Animationen mit Framer Motion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!