Scroll Shape Morph — Free GSAP Blob Morph Snippet

The scroll shape morph pins a single gradient element and reshapes it as you scroll: an organic blob tightens into a soft pebble, then squares off into crisp geometry — while its hue rotates and captions narrate each state. Scrolling up melts it back. It's a lightweight way to visualize a "flexible to structured" story without SVG path morphing. This snippet builds it with GSAP ScrollTrigger (from a CDN) and interpolated 8-value border-radius.

Blobs are just asymmetric border-radius

The organic shape comes from border-radius's full syntax: 58% 42% 63% 37% / 45% 58% 42% 55% sets each corner's horizontal radii before the slash and vertical radii after. Unequal values per corner turn a square div into a lumpy, organic form — no SVG, no clip-path, no mask. The gradient fill and a colored shadow complete the blob look on a single div.

GSAP interpolates all eight radii between states

Each morph tweens borderRadius from one 8-value string to the next. GSAP parses complex CSS values into their numeric components and interpolates each of the eight percentages independently, so every corner travels smoothly from its blob value to its square value. The one rule: all states must use the same full syntax — mixing 12% shorthand with 8-value strings would misalign the component mapping, which is why the square state is written out as all eight values.

Rotation disguises the corner correspondence

A pure radius morph can look like corners "breathing" in place. Adding rotation: 40° then 90° across the two morphs keeps the silhouette turning while it reshapes, so the eye reads continuous transformation rather than four corners independently inflating. By the square state the element has turned a quarter — arriving at geometry squared-up, not tilted.

hue-rotate recolors without a second gradient

The fill appears to shift from indigo-cyan toward warmer tones via filter: hue-rotate() — one interpolatable value — instead of crossfading stacked gradient layers. It's the cheapest way to make each shape state feel like its own "chapter" color while the underlying gradient never changes.

Captions narrate state boundaries

Three captions hand off at the morph boundaries on the same scrubbed timeline (out at 0.6/1.6, in at 0.75/1.75), with a small gap between exit and entrance so two captions never overlap mid-scrub. As always with single-timeline choreography, the narration can't drift from the shape it describes.

Two morphs, 220% of scroll

Each state transition owns one timeline unit across a +=220% pin — roughly a full viewport-height of scrolling per morph, slow enough to watch corners travel. scrub: 0.5 smooths the reshaping into a melt rather than a stutter.

Where this approach ends

Radius morphing handles convex, roundish forms. For star shapes, letters, or concave silhouettes you'd graduate to SVG path morphing (MorphSVG or flubber); for a continuously wobbling blob see the liquid blob snippet.

Box-shadow and gradient stay constant while the silhouette changes

The blob's colored shadow and gradient fill never animate — only border-radius, rotation, and the hue-rotate filter move. Keeping the shadow static means the browser doesn't need to recompute blur geometry every frame; it just repaints the same shadow shape clipped by whatever the border-radius currently is. That division of labor — shape-defining properties animate, decorative properties stay fixed — is what keeps a filter-heavy element (blur shadow, hue rotation) affordable under a scrub running at 60fps.

Customizing it

Add states to the SHAPES array (one tween per transition), retint via the hue-rotate degrees, or put a logo inside the shape. Pair it with scroll color sections for page-wide theming, a scroll word wheel for the headline, or wave divider transitions between sections.