Eine 3D Scroll Animation in Webflow bauen

Level:
Profi 💪
Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.
Cookies akzeptieren und Medien laden
Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Affiliate Link
Icon für einen externen Link

In diesem Webflow Tutorial zeige ich dir, wie du eine Scroll Animation mit 3D Perspektive erstellst. Mit ein paar Tricks kannst du dabei sogar 2D Objekte wie 3D aussehen lassen und damit einen Wow-Effekt auf deine Website bringen.

Ich nutze dafür die Webflow Interaktion „while scrolling in view”. Die Animation baut sich also langsam im sichtbaren Bereich des Seitenbesuchers auf und scrollt sticky mit. Damit das Ganze auch einfach kleiner skaliert, nutze ich das Fluid Design System auf dem Desktop Breakpoint (siehe custom-CSS Embed Element).

Ich habe eine Weile an der Animation rum probiert, weshalb ich mich über einen Daum hoch 👍 sehr freuen würde!

Du findest das ganze Projekt wie immer als kostenloses Cloneable in meinem Webflow Showcase Profil.