Scroll-Animation

Portfolio Aufbau: Sticky Projekt-Teaser Scroll Animation in Webflow

Level:

Fortgeschritten 👍

Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.

Cookies akzeptieren und Medien laden

Ergebnis anschauen

https://sticky-teaser-image-scroll-animation.webflow.io

Im Webflow Designer öffnen und klonen

https://webflow.com/website/Sticky-Project-Teaser-Image-Scroll-Animation

Im Webflow Designer öffnen und klonen

https://webflow.grsm.io/Sticky-Project-Teaser-Image-Scroll-Animation

Affiliate 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