Webflow build
A five-frame scroll animation, built in Webflow
Webflow build: an image that splits into five frames, drops and snaps back together as you scroll.
Type: Webflow build · Built with: Flexbox, Webflow scroll interactions · Live demo: five-frame-drop.webflow.io
A scroll-driven experiment that rewards visitors for scrolling.
What it does
As you scroll, an image breaks into five frames that drop away, then snap back together. Scroll back up and everything reassembles.
How it’s built
- Five frames cut from a single image, set in a flexbox container.
- The complete image laid over the frames, fading out as they separate.
- A scroll interaction that ties every movement to scroll position.
Where it fits
Long-form pages and storytelling sections that need a moment of surprise.
