Page transition

Shaped Section Boundary

by Vanguardia · motionprompts.dev

Stacked full-height sections whose top edge is a shape instead of a straight line: each incoming section carries its own boundary element, painted with `background: inherit` so the edge can never drift from the section colour, and clipped by a `clip-path: polygon()` whose vertices are driven by a single `@property`-registered custom property `--forma`. One scrubbed ScrollTrigger per boundary tweens `--forma` from 0 (flat) to 1 (full shape) over a window that closes at `top 55%`, so the edge has finished moving before the section is read. Five forms ship: wave, chevron, oblique, torn (twelve fixed pseudo-random points) and arch (a real curve via `border-radius`, not a polygon). Smoothed by Lenis; honours prefers-reduced-motion by locking the shape open.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: none
Complexity: 2/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger, lenis

scroll-scrubbed clip-path morph on section top edges: one ScrollTrigger per boundary tweens an @property-registered custom property --forma 0→1 over start top bottom → end top 55%, and the polygon() vertices of each shape (wave/chevron/oblique/torn) or the border-radius (arch) are calc() expressions of that number; no tween on any content, no pin, no transform

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev15,743 charsCustomize

# Shaped Section Boundary — the edge between stacked sections is a shape, opened by scroll

## Goal

Build a scrolling page of full-height, flat-colour sections…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.