Portfolio Aufbau: Sticky Projekt-Teaser Scroll Animation in Webflow

Level:
Fortgeschritten 👍

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!

Ergebnis anschauen:


https://webflow-lernen.webflow.io/portfolio-sticky-project-teaser

Direkt im Webflow Designer öffnen:


Projekt klonen

Kapitel:

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