Several ways to animate the seam between two sections of a page, the line where the hero above the fold meets the white page that scrolls up over it, all driven by scroll with GSAP and ScrollSmoother: ink bleeding, tiles crumbling off, a blanket fraying, the photograph set in type, a contour map, marbling, mist, kintsugi cracks, roots, sediment and wood shavings.
The idea comes from two places that treat the edge between sections as something that moves: Mosaic by Flabbergast, where the bottom of the dark hero breaks into square tiles as you scroll into the white section, and Jesper Landberg's demo for his Codrops article Designing in Paper as a Developer: Taking Paper Shaders off the Background, where the sections are separated by torn edges drawn with a shader that widen as you scroll. The seams here are our own takes on that idea.
There's no build step and nothing to install. Serve the folder with any static server (the scripts are ES modules, which don't load from file://):
npx serve .
# or
python3 -m http.serverThen open index.html (01) or index2.html to index11.html (02 to 11) and scroll down past the hero.
- Photographs: generated for this demo.
- Walt Whitman, "Song of the Open Road", from Leaves of Grass (1891–92 edition), in the public domain, via Project Gutenberg.
- Plus Jakarta Sans and, for Typeset's type, Kode Mono, from Google Fonts.
- GSAP 3.15 with ScrollTrigger, ScrollSmoother, SplitText and Physics2DPlugin.