3D Tablet Scroll Animation in Webflow

Wir bauen zusammen in Webflow eine 3D Scroll-Animation, mit der du während des Scrollens ein Tablet langsam zum Betrachter hin rotieren lassen kannst. Mit Hilfe einer 3D Perspektive kannst du hier in wenigen Schritten einen tollen Effekt erreichen und sogar animierte Videos anstatt einem statischen Bild einsetzen. Ich nutze diesen Aufbau in einer meiner Case Studies in meinem Portfolio.

Kapitel:

00:00 – Intro und Vorschau
00:34 – 2D Material in 3D nutzen
01:13 – 3D Effekt bauen
05:07 – Animation anlegen
06:47 – Animiertes Video einbinden
07:35 – Ergebnis

Erstelle eine beeindruckende Tablet-Scroll-Animation für dein Portfolio in Webflow

Willkommen zu einem neuen Webflow Tutorial, in dem wir gemeinsam eine coole Tablet-Scroll-Animation erstellen, die du auch perfekt in dein Portfolio integrieren kannst. Mein Name ist Jonas Arleth und ich werde dir Schritt für Schritt zeigen, wie du diese Animation mit nur wenigen Klicks in Webflow umsetzen kannst. Wir werden eine Mockup-Vorlage verwenden, die wir im letzten Video erstellt haben, um den Prozess zu vereinfachen. Egal, ob du ein Bild oder ein animiertes Video verwenden möchtest, diese Animation wird sich perfekt an das Scrolling anpassen. Lass uns direkt loslegen!

Die Ausgangslage verstehen

Um die Tablet-Scroll-Animation zu erstellen, benötigen wir eine Grundstruktur in Webflow. Diese besteht aus einer Sektion mit Textinhalten und zwei wichtigen Elementen: dem "Tablet Mockup Animation" und dem "3D Tablet Wrapper".

Um zu starten, erstellen wir eine neue Sektion und fügen Textinhalte hinzu, die du entsprechend anpassen kannst. Das "Tablet Mockup Animation" dient als Hintergrundbild oder Video, das auf dem Tablet angezeigt wird. Verwende hierfür die Mockup-Vorlage aus dem vorherigen Video oder wähle ein eigenes Bild oder Video aus. Beachte, dass wir den realistischen 3D-Effekt mit CSS 3D Transform erzeugen. Das Tablet ist also ein 2D Bild und kein echtes 3D File.

Einstellungen für die 3D-Animation konfigurieren

Damit das Tablet in 3D gedreht aussieht, müssen wir die entsprechenden Einstellungen vornehmen. Wir wählen das "3D Tablet Wrapper" Element aus und gehen zu den Transform 3D-Eigenschaften. Dort fügen wir eine Rotationsanimation hinzu, indem wir das Element um eine bestimmte Gradzahl drehen.

Normalerweise würde das Tablet flach aussehen, ohne eine realistische Perspektive. Um dies zu vermeiden, stellen wir die "Children Perspective" des übergeordneten Elements auf einen Wert von etwa 1000 ein. Dadurch wird die Perspektive für das Kind-Element, also das Tablet, festgelegt. Anpassungen an den Werten können je nach gewünschtem Effekt vorgenommen werden.

Erstellung der Scroll-Animation

Um die eigentliche Scroll-Animation zu erstellen, verwenden wir Webflows Interaktionsfunktionen. Wir wählen das "3D Tablet Wrapper" Element aus und konfigurieren die Animation, die abgespielt wird, während der Benutzer scrollt.

Durch das Auslösen der Animation beim Scrollen können wir das Tablet sanft drehen lassen. Hierfür erstellen wir eine neue Scroll-Animation und definieren den Start- und Endzustand der Rotation. Je nach gewünschtem Effekt können die Werte angepasst werden, um die Animation individuell anzupassen.

Integration von Bildern und Videos

Eine besondere Funktion dieser Tablet-Scroll-Animation ist die Möglichkeit, sowohl Bilder als auch Videos zu integrieren.