Before / After Scroll Animation – 100% Made in Webflow

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

In this tutorial, Jonas Arleth shows how to create a before-and-after scroll animation in Webflow. He explains that it's not as easy as it looks at first glance, as you have to create a mask to move the video while scrolling. He shows an example of a website that uses this technique and also gives tips for designing and adapting the animation.


More content

Blog Archiv

I Gave Claude Code My Hardest Animation Challenge Yet

Can Claude Code build an infinite slider with a seamless FLIP overlay transition? I tested it with GSAP, Smooothy and my Figma design for a fictional artist agency.
Video
​
Skill
Beginner
Kategorie
AI

Anschauen
Beitrag anschauen

I Designed This in Figma. Can Claude Build It?

I designed a website in Figma and gave Claude only a screenshot, fonts, images and one prompt. See how close AI gets to an individual animated design.
Video
​
Skill
Beginner
Kategorie
AI

Anschauen
Beitrag anschauen

Make a Boring List Impressive with This Simple GSAP Effect

Build a simple typo scroll animation in Webflow with GSAP. Names scale in the center and animated brackets appear, powered by the CMS.
Video
​
Skill
Beginner
Kategorie
GSAP

Anschauen
Beitrag anschauen

Kreative GSAP Hero Animation mit einem 3D Card Loop-Effekt

Learn step-by-step how to animate a premium hero section in Webflow using GSAP, including scroll triggers, staggers, and loop effects.
Video
​
Skill
Intermediate
Kategorie
Animation

Anschauen
Beitrag anschauen

Webflow Text Marquee Animation with the new GSAP Timeline

Learn how to build a looping marquee in Webflow using the GSAP Timeline. No custom code needed scroll-triggered and performance-friendly.
Video
​
Skill
Beginner
Kategorie
GSAP

Anschauen
Beitrag anschauen

Turn Any Product Hero Into a Premium Showcase (No 3D)

Build a 360° rotating product hero in Webflow with AI-generated video, blend modes & container queries. Free cloneable included.
Video
​
Skill
Beginner
Kategorie
Animation

Anschauen
Beitrag anschauen