Portfolio Aufbau: Sticky Projekt-Teaser Scroll Animation in Webflow

Level:
Fortgeschritten 👍
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
Icon für einen externen Link

Ein weiteres Layout, welches du in deinem Portfolio als Projektübersicht einsetzen könntest. Wir bauen zusammen in Webflow ein Splitscreen-Design, bei dem links die Texte durch scrollen und rechts die Projektbilder parallel dazu sticky immer im Viewport bleiben und sich je nach Projekt-Teaser und Scroll-Position austauschen.

Die Scroll Animation dazu legen wir direkt in Webflow an. Denk dran, dass du die Interaktion anpassen musst, sobald mehr Teaser hinzukommen!

Kapitel:

00:00 – Intro
01:17 – Aufbau in Webflow
06:27 – Scroll Interaktion anlegen
09:07 – Ergebnis