Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The canopy that changes shape
Scroll inside the preview
The scroll story of a residence, in the minimal style: two frames shaped like a tree crown, with a facade of thin branches inside, turn from one shape into the next as you scroll, and the facade goes from day to evening. On the left three statements, one at a time, rising out of a blur and gaining weight.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The canopy that changes shape</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up residence, Linden Court. A long scroll holds one still stage: three short statements on the left, and
on the right two frames cut in the shape of a tree crown, with a facade of thin branches inside. As you scroll
the frames change shape, one into the next, and the facade turns from day to evening -->
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<div class="testi">
<article class="schermo" data-schermo>
<p class="occhiello">Linden Court design</p>
<h2 class="frase" data-frase>A facade shaped like a canopy.</h2>
</article>
<article class="schermo" data-schermo>
<p class="occhiello">The idea</p>
<h2 class="frase" data-frase>Not another tower: a grove that grew in the city.</h2>
</article>
<article class="schermo" data-schermo>
<p class="occhiello">The homes</p>
<h2 class="frase" data-frase>A new chapter in quiet living.</h2>
<a class="vai" href="#" data-vai>See the homes</a>
</article>
</div>
<svg class="cornici" viewBox="0 0 100 100" aria-hidden="true" data-cornici>
<defs>
<clipPath id="forma-grande" clipPathUnits="userSpaceOnUse"><path data-grande /></clipPath>
<clipPath id="forma-piccola" clipPathUnits="userSpaceOnUse"><path data-piccola /></clipPath>
</defs>
<g clip-path="url(#forma-grande)">
<g data-giorno-grande></g>
<g data-sera-grande></g>
</g>
<path class="bordo" data-bordo-grande />
<g clip-path="url(#forma-piccola)">
<g data-giorno-piccola></g>
<g data-sera-piccola></g>
</g>
<path class="bordo" data-bordo-piccola />
</svg>
<div class="avanza">
<span class="avanza__nome" data-nome>Facade</span>
<span class="avanza__riga"><span class="avanza__pieno" data-pieno></span></span>
</div>
</div>
</section>
<footer class="fine">
<p>Linden Court, homes among the trees.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
24 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The canopy that changes shape” from Animorio and fit it into my siteWhat it does
Linden Court, a made-up residence, tells its story in a long scroll that holds the scene still. On the right two frames cut like tree crowns, one large and one small, with a facade of thin trunks that fork as they rise. As you scroll, the frames change shape twice, one into the next, tied to the scroll, and the facade goes from the sand of day to the pine green of evening, with the branches turning gold. On the left three statements, one at a time: at every change the letters of the old one rise and blur, those of the new one come up from below, blurred and light, and settle as they gain weight. At the bottom the name of the statement and a thin line that fills with the scroll.
How it works
The shapes
Each frame is an SVG clipPath. The shapes are four-sided with rounded corners, written by a function that makes a quadratic curve at every corner: they all have the same four corners, so MorphSVGPlugin turns one into the next without tangles. The same path also draws the thin outline.
The facade
Inside each frame there are two matching groups, day and evening: a rectangle of colour and a path of branches, trunks that rise and fork three times with random angles and lengths (a seeded random, so always the same). Evening sits over day and its opacity rises with the scroll.
The scroll
A GSAP timeline tied to the section’s scroll, with a scrub of SCRUB seconds: the two changes of shape start at the points in MORPH_AT and take MORPH_FOR of the run, with ease none as on the site; the small frame starts a moment after the large one. Meanwhile evening rises and everything turns by two degrees. Lenis makes the scroll smooth.
The statements
SplitText splits each statement into letters. A ScrollTrigger watches which third of the run you are in and changes statement: the old letters rise and blur, the new ones start RISE rem below, blurred by BLUR pixels and at weight WEIGHT_FROM, and reach 340 one after the other (STAGGER) with power3.out. The typeface is variable, so the weight changes smoothly.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SCRUB | script.js | 0.8 | How softly the frames follow the scroll, in seconds. |
MORPH_AT | script.js | [0.15, 0.5] | Where the two changes of shape start, as shares of the run. |
MORPH_FOR | script.js | 0.25 | How much of the run each change of shape takes. |
STAGGER | script.js | 0.025 | The gap between one letter and the next. |
BLUR | script.js | 4 | How blurred the letters start, in pixels. |
RISE | script.js | 2 | How far below the letters start, in rem. |
WEIGHT_FROM | script.js | 200 | The weight the letters start from; they settle at 340. |
BRANCHES | script.js | 6 | How many trunks the facade has. |
When to use it
For presenting a residence, a hotel, an architecture studio or a brand that wants to tell an idea in three statements, with two pictures that change shape. Two photos can take the place of the branches.
On phones
The same, with the frames on top and the statements below, smaller.
With reduced motion
The frames do not change shape before your eyes: at every statement they fade, take the new shape and come back. The letters only fade in, already at their weight, and the scroll is not smoothed.
Pitfalls
- The shapes to morph must have the same number of corners and start from the same corner: otherwise MorphSVG spins them or knots them halfway.
- The change of statement must be tied to an index, not to the scrub: with the scrub the letters would be left halfway, blurred, when you stop.
- The branch path needs vector-effect: non-scaling-stroke: the frames are a scaled-up SVG and the lines would turn thick without it.
- The weight of the letters only animates if the typeface is variable and loaded with its weight axis; with a static font it jumps from one weight to the next.
Libraries
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.9 KB; the libraries: GSAP + ScrollTrigger + SplitText + MorphSVG 58 KB, Lenis 5.3 KB.
Testing
Tested on 17 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
