Epic Scroll Animations
What it does
A long scroll story where two sections (a pinned 'revealer' shape and the header-info block) are pinned with ScrollTrigger while a white cross/plus shape rotates 360deg, expands its clip-path into a full cross, drifts horizontally, then scales up 13x to wipe the screen and reveal the final content. Driven entirely by multiple scrub/onUpdate ScrollTriggers over Lenis-smoothed scroll.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
How it works
A long scroll story that ends in a white-out. After a duotone hero and two giant headings, a dark editorial block with a paragraph and a row of photographs freezes in place, and a tiny white plus sign floats over it. As you keep scrolling the cross turns a full circle, its arms thicken until it becomes a solid white square, and it drifts towards the centre of the screen. Then the square grows and grows until it fills the entire viewport, and the white it leaves behind becomes the background of the closing section.
It is built with GSAP ScrollTrigger and Lenis. There is no canvas and no SVG: the cross is two plain boxes and CSS clip-paths.
Building a cross from two boxes
The shape is two identical white boxes laid on top of each other, one turned a quarter turn. Each is clipped down to a thin vertical strip through its middle, so together they read as a plus sign. To turn the plus into a square, the scroll widens both clips at the same rate until each box shows in full; because one box is rotated, the two strips grow into each other and fill the square.
Six triggers, layered
The sequence is not one timeline but several ScrollTriggers, each owning one property over its own stretch of the page. Two of them pin: the editorial block and the layer holding the cross both stick to the top of the viewport and are released at the same point further down, so they stay locked together for the whole reveal. The others drive the motion: one turns the cross, one widens its clip, one slides it horizontally, and one scales it up over a tall empty runway at the end.
They also feel different on purpose. The rotation is applied through a short eased tween on every update, so it trails the scroll slightly and feels heavy. The clip is bound directly to the scroll with no smoothing, so the shape stays sharp. The drift and the final scale use a scrub with a little lag, which softens the large movements.
Where it gets hard
The page relies on a careful stack of section heights and layers: an absolutely positioned layer for the cross that overlays earlier sections, a tall spacer behind everything that provides scroll distance, and a closing section on top that shares the cross's white so the handover is seamless. Change one height and the triggers' start and end points shift with it, so the whole sequence has to be tuned as a set.
Performance and mobile
Everything animated is a transform or a clip-path on two small elements, so it is light even on phones. Below tablet width the cross is re-centred and the display type shrinks; because every change to the cross is a percentage or a scale, the effect holds at any screen size.
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Epic Scroll Story — Rotating Clip-Path Cross that Scales Up to Wipe the Screen
## Goal
Build a long, cinematic single-page scroll story. A tiny white **plus/cross shape** sits over a pinned dark editorial section; as you scroll, it **rotates a full 360°**, its `clip-path` **expands** from a thin cross into a solid white square, it **drifts horizontally** from left-of-center to center, and finally **scales up ~13×** to white-out the entire viewport and hand off to a final white content section. Everything is driven by several scrubbed / `onUpdate` GSAP ScrollTriggers over Lenis-smoothed scrolling, plus two pinned sections.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugin **`ScrollTrigger`**, and **`lenis`** for smooth scroll.
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger);
```
Run everything inside a `DOMContentLoaded` handler.
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.