So starten Sie eine Animation jedes Mal neu, wenn Sie mit Divi & GSAP an einem Element vorbeiscrollen

Wenn Sie Elemente auf Ihrer Seite animieren möchten, möchten Sie wahrscheinlich die Animation eines Elements aktivieren, sobald es in das Ansichtsfenster eintritt. Mit den integrierten Animationseinstellungen von Divi bleibt dieses Element, sobald es sichtbar und animiert wurde, statisch, bis Sie die gesamte Seite neu laden. In einigen Fällen können Sie nach einem konsistenteren Ansatz suchen, bei dem Ihre Animation bei jedem Eintrag im Ansichtsfenster neu gestartet wird. Auf diese Weise können Sie die Erfahrung der Besucher auf Ihrer Website optimieren. In diesem Tutorial zeigen wir Ihnen genau, wie das mit Divi, GSAP und ScrollTrigger für GSAP geht. Sobald Sie den Ansatz verstanden haben, können Sie ihn auf jedes Element auf Ihrer Seite anwenden. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout KOSTENLOS herunter

Um das kostenlose Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Schnittdesign erstellen

Platzhalterabschnitt hinzufügen

Bevor wir mit dem Erstellen des Designs beginnen, fügen wir der Seite, an der wir arbeiten, zwei Platzhalterabschnitte hinzu. Auf diese Weise können wir das Scroll-Erlebnis sehen, sobald das Design fertig ist. Alternativ können Sie das Design auch innerhalb einer bereits eingerichteten Seite verwenden. Fügen Sie einen neuen regulären Abschnitt hinzu.

Größe

Ändern Sie die Höhe des Abschnitts wie folgt:

• Höhe: 100vh

Platzhalterabschnitt klonen

Klonen Sie dann den Abschnitt einmal.

Neuen Abschnitt zwischen Platzhalterabschnitten hinzufügen

Um das Design zu erstellen, das Sie in der Vorschau dieses Beitrags sehen konnten, fügen wir zwischen den Platzhalterabschnitten einen neuen regulären Abschnitt hinzu.

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zum Design-Tab und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 90%
• Maximale Breite: 2080px

Textmodul Nr. 1 zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie dann der Spalte ein erstes Textmodul hinzu und fügen Sie einige Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Montserrat
• Schriftstärke des Textes: Schwer
• Textschriftart: Großbuchstaben
• Textfarbe: #f9f9f9
• Textgröße:
  • Desktop: 150px
  • Tablet & Telefon: 11vw
• Textzeilenhöhe: 1.1em
• Textausrichtung: Mitte

Textmodul #2 zur Spalte hinzufügen

H2-Inhalt hinzufügen

Fügen Sie unterhalb des vorherigen ein weiteres Textmodul hinzu und fügen Sie einige H2-Inhalte hinzu.

H2-Texteinstellungen

Stylen Sie den H2-Text wie folgt:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textgröße:
  • Desktop: 80px
  • Tablet & Telefon: 10vw

Größe

Fügen Sie auch eine Breite von 100% hinzu.

• Breite: 100%

Position

Und positionieren Sie das gesamte Modul im erweiterten Tab neu.

• Position: Absolut
• Ort: Zentrum

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie eine weitere Zeile unter der vorherigen hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und passen Sie die Größeneinstellungen wie folgt an:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 90%
• Maximale Breite: 2080px

Spalte 1 Einstellungen

Öffnen Sie dann die Einstellungen von Spalte 1.

Hintergrundbild

Laden Sie ein Hintergrundbild Ihrer Wahl hoch.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte

Abstand

Ändern Sie als Nächstes die Abstandseinstellungen der Spalte.

• Obere Polsterung: 100px
• Untere Polsterung:
  • Desktop: 400px
  • Tablet & Telefon: 200px
• Linke Polsterung: 5,5%
• Rechte Polsterung: 5,5%

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H4-Inhalt hinzufügen

Fügen Sie dann in Spalte 1 ein Textmodul mit H4-Inhalten hinzu.

H4-Texteinstellungen

Stylen Sie den H4-Text entsprechend:

• Überschrift 4 Schriftart: Lato
• Überschrift 4 Schriftstärke: Schwer
• Überschrift 4 Schriftstil: Großbuchstaben
• Überschrift 4 Textgröße: 13px
• Überschrift 4 Buchstabenabstand: 2px

Textmodul #2 zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Fügen Sie unter dem vorherigen ein weiteres Textmodul hinzu, das einige H3-Inhalte verwendet.

H3-Texteinstellungen

Ändern Sie die H3-Texteinstellungen entsprechend:

• Überschrift 3 Schriftart: Montserrat
• Überschrift 3 Textgröße: 36px
• Überschrift 3 Buchstabenabstand: 1px
• Überschrift 3 Zeilenhöhe: 1,2em

Textmodul #3 zu Spalte 1 hinzufügen

Beschreibungsinhalt hinzufügen

Fügen Sie das letzte Textmodul hinzu, das einen Beschreibungsinhalt Ihrer Wahl enthält.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Lato
• Textfarbe: #4c4c4c
• Text Buchstabenabstand: 0.5px
• Textzeilenhöhe: 2em

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in dieser Spalte benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Gestalten Sie die Schaltfläche im Design-Tab.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px

• Schaltflächenschrift: Lato
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

Spalte 1 wiederverwenden

Spalte 2 & 3 löschen

Sobald Sie Spalte 1 und alle darin enthaltenen Module ausgefüllt haben, können Sie die beiden verbleibenden Spalten der Zeile löschen.

Spalte 1 zweimal klonen

Und Spalte 1 wiederverwenden, indem Sie sie zweimal klonen.

Doppelte Spaltenhintergrundbilder ändern

Stellen Sie sicher, dass Sie das Hintergrundbild jeder doppelten Spalte ändern.

Inhalt in doppelten Spalten ändern

Zusammen mit den Modulinhalten.

Einstellungen für Transformieren in Spalte 2 hinzufügen hinzufügen

Öffnen Sie dann die Einstellungen von Spalte 2 und gehen Sie zur Registerkarte Design. Wenn Sie dort angekommen sind, fügen Sie einige Transformationswerte für verschiedene Bildschirmgrößen hinzu, um das Design zu vervollständigen.

• Links:
  • Desktop: 50px
  • Tablet & Telefon: 0px

2. Wenden Sie die Neustart-Animationstechnik auf das Design an

CSS-Klasse zu Zeile 2 hinzufügen

Nachdem unser Design nun an Ort und Stelle ist, können wir uns auf die Neustart-Animationstechnik konzentrieren. Wir werden dafür mehrere Module gleichzeitig ansprechen. Öffnen Sie zunächst die Einstellungen der zweiten Zeile und wenden Sie die folgende CSS-Klasse an:

• CSS-Klasse: trigger-animation-row

Codemodul zu Zeile 1 hinzufügen

Die CSS-Klasse, die wir im vorherigen Schritt dieses Tutorials hinzugefügt haben, hilft uns dabei, alle Module in dieser Zeile gleichzeitig anzusprechen. Um die Neustart-Animation zu erstellen, verwenden wir etwas JQuery-Code, die GSAP-JavaScript-Bibliothek und die ScrollTrigger-Bibliothek für GSAP. Um diesen Code hinzuzufügen, fügen wir unterhalb des zweiten Textmoduls in Zeile 1 ein neues Codemodul ein.

GSAP- und ScrollTrigger-Bibliotheken hinzufügen

Stellen Sie sicher, dass Sie die GSAP- und ScrollTrigger-Bibliotheken in neue Skript-Tags einfügen.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Neue Skript-Tags hinzufügen

Fügen Sie dann neue Skript-Tags unter den Skript-Tags der Bibliothek hinzu.

GSAP + ScrollTrigger-Funktion hinzufügen

Innerhalb der neuen script-Tags kopieren wir die folgenden Zeilen des JQuery-Codes:

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Dieser Code zielt auf alle Zeilenmodule gleichzeitig ab und startet die Animation neu, sobald ein Besucher das Ansichtsfenster erneut betritt. Die Animation ist in diesem Fall ziemlich einfach und minimal. Mit GSAP und ScrollTrigger können Sie jedoch jede Art von Animation erstellen, die Sie möchten, also lohnt es sich auf jeden Fall, sich das anzuschauen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie eine Animation neu starten, sobald das Element das Ansichtsfenster betritt. Dieser Ansatz hilft Ihnen, ein konsistentes Erlebnis zu schaffen, egal wie Ihre Besucher scrollen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.