SofiHealth Product Scroll Animation
What it does
A pinned, scrub-driven scroll section where a Three.js GLTF shaker model spins on its Y-axis while a single ScrollTrigger onUpdate handler maps scroll progress to sliding headers, an expanding circular clip-path mask, and staggered SplitText tooltip reveals. Lenis smooth-scroll feeds ScrollTrigger, and a separate ScrollTrigger reveals the split header characters on enter.
How it's built
| Category | scroll |
|---|---|
| Tech | three, gsap, lenis |
| GSAP plugins | ScrollTrigger, SplitText |
| Complexity | page |
| Performance cost | heavy |
| Mobile-safe | desktop-first |
| Scroll | hijacks scrolling |
How it works
A product page built around one object on a long scroll. As you reach the showcase, a giant headline rises character by character, then the section pins and a 3D shaker bottle starts spinning on its own axis in step with the scroll. While it turns, the first headline slides away to the left, a second one in the opposite colour sweeps across the whole screen, a dark circle grows from the centre until it swallows the light background, and two feature notes appear on either side of the bottle: a divider line draws itself, then the icon, title and description rise line by line out of hidden slots.
It combines GSAP with ScrollTrigger and SplitText, Lenis for smooth scrolling, and Three.js to render a glTF model on a transparent canvas above the page.
One progress value, many stages
The showcase is pinned for a long stretch of scroll with a scrubbed ScrollTrigger, and the whole choreography is driven from its progress value in one update handler. Each stage is given its own slice of that progress, and the handler maps the slice to a value: how far the headlines have travelled, how big the circular mask is, how long the dividers are. Because the slices overlap, several things happen at once without ever being a single timeline, and each value is applied with a short tween so the motion keeps a soft glide on top of the scrub. The feature notes work differently: rather than following the scroll continuously, they switch on once the progress passes a threshold and switch off if you scroll back, so their text always plays its full staggered reveal instead of hanging half-visible.
The light-to-dark switch is a clip-path circle that grows from the centre of the section until it covers it, which feels like the scene changing rather than a colour fade.
The 3D model
The bottle is loaded from a glTF file, its materials are made matte, and it is lit with a soft ambient light and two directional lights. Its rotation is tied to the scroll so that it completes several turns across the pin. The rotation is applied as a difference from the last value around the bottle's own long axis, which keeps a tilted bottle spinning naturally and lets it unwind exactly when you scroll back.
Where it gets hard
The text reveals depend on masks: every character and every line is wrapped so the outer element clips and the inner one moves, otherwise text would slide over the layout instead of out of a slot.
Performance and mobile
The scene is one model on a transparent WebGL canvas with a capped pixel ratio and a render loop, so the GPU cost is moderate; a long pinned section is the main thing to weigh. Below tablet width the notes stack vertically, the bottle moves aside and loses its tilt, and the camera pulls back so the object stays in frame.
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.
# 3D Product Scroll Showcase — pinned scrub section with rotating GLTF model
## Goal
Build a full-page scroll experience for a fictional fitness shaker brand called "GRND". The star of the show is a pinned, scrub-driven section where a Three.js GLTF shaker-bottle model spins on its Y axis in sync with scroll progress while, mapped to the same progress value, two giant headlines slide horizontally across the screen, a dark circular clip-path mask expands to swallow the background, and two feature tooltips reveal with masked, staggered SplitText line animations.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins `ScrollTrigger` and `SplitText`, `lenis` for smooth scrolling, and `three` (npm) with `GLTFLoader` from `three/examples/jsm/loaders/GLTFLoader.js` for the 3D model. Icons are Ionicons v7 web components served from your own origin (`/vendor/ionicons/ionicons.esm.js` as a module script plus the `nomodule` fallback `ionicons.js`); get them with `npm i ionicons@7.1.0` and copy the whole `node_modules/ionicons/dist/ionicons/` folder, since the loader fetches its chunks and one SVG per icon relative to the script's own URL.
All JS runs inside a `DOMContentLoaded` listener. Register `ScrollTrigger` and `SplitText` with `gsap.registerPlugin`.
## Layout / HTML
Three stacked full-viewport sections:
1. `<section class="intro">` — a single `<h1>` with the copy "GRND doesn't shake. It performs."
2. `<section class="product-overview">` — the pinned showcase, containing in this order:
- `<div class="header-1"><h1>Every Rep Starts With</h1></div>`
- `<div class="header-2"><h1>GRND Shaker</h1></div>`
…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.