3D Tablet Scroll Animation in Webflow

Level: Einfach
Scroll-Animation
ressourcen
Free Cloneable
Live Vorschau
* AFFILIATE LINK
Details
Level
Einfach
Datum
July 12, 2026
Autor
Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.
Jonas Arleth
Blog Post

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.


Mehr Content

Blog Archiv

Portfolio Grid mit Teaser Animation in Webflow erstellen

Wir bauen zusammen eine dezente Scroll-Into-View Animation, welche Teaser Bilder rein animiert, sobald sie in den sichtbaren Bereich des Seitenbesuchers kommen.
Video
Kategorie
Scroll-Animation
Skill
Einfach

Anschauen
Beitrag anschauen

Portfolio Bilder Collage Scroll Animation

Lerne wie du eine Collage aus vielen Bildern während des scrollens ran oder raus zoomen kannst. Das Ganze nutze ich ganz oben in einer meiner Portfolio Case Studies.
Video
Kategorie
Scroll-Animation
Skill
Einfach

Anschauen
Beitrag anschauen

Portfolio Aufbau: Sticky Projekt-Teaser Scroll Animation in Webflow

Ein Splitscreen-Design passend für dein Portfolio, bei dem links die Texte durch scrollen und rechts die Projektbilder sticky immer im Viewport bleiben und sich je nach Projekt-Teaser und Scroll-Position austauschen.
Video
Kategorie
Scroll-Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen

Header in Webflow später rein animieren

Blende deinen Header bzw. deine Navigation aus und ein abhängig davon, bei welchem Bereich der Seitenbesucher gerade scrollt.
Video
Kategorie
Scroll-Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen

Hintergrundfarbe beim Scrollen ändern – Scroll-Animation

Schau dir an wie du während des Scrollens auf einer Website die Hintergrundfarbe einer Section änderst bzw. mit einem fade-in / fade-out Effekt ein und ausblendest.
Video
Kategorie
Scroll-Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen

Fancy Schriftzug Scroll-Animation – Webflow Tutorial

Lerne wie du in wenigen Schritten einen Schriftzug oder eine ganze Headline an das Scrolling anbinden kannst, um die einzelnen Buchstaben während dem scrollen zu animieren
Video
Kategorie
Scroll-Animation
Skill
Einfach

Anschauen
Beitrag anschauen