Hello, I'm Nick. I design insane websites and user interfaces.
This is where I talk about all of the cool sites I find online.
I stared at the "What If Health Was …" section on MyHealthPrac for way longer than I should have, trying to figure out what kind of scroll-scrubbed animation they had wired up. There is a black stage, a giant hairline circle, and five propositions rotating into place as you scroll. It feels scrubbed. It behaves like it is tied frame-by-frame to your wheel input. Then I actually measured what was happening under the hood, and the wheel is not scroll-scrubbed at all.
The move that broke my assumption
The setup is pure CSS. .scroll_track { height: 510vh } wrapping .scroll_section { position: sticky; top: 0; height: 100vh }. No GSAP timeline pinning. No ScrollTrigger takeover. On a 900px viewport, that is 4,590px of track and roughly 3,690px of scrubbing runway.
If you sample the wheel's transform across that runway, you do not get a smooth curve. You get plateaus. The angle sits at exactly -72°, then exactly -144°, then exactly -216°, holding dead still across bands of about 810px each (roughly 0.9 viewport per item). Then, when you cross the next threshold, it travels 72° in about 600ms on a single hand-written transition: transform 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95).
That easing curve is the whole trick. It is an ease-in-out sine, with no snap at either end. So your eye reads inertia where there is only a tween running on its own clock.
Threshold-stepped, dressed as scrubbing
The label swap is choreographed against it. The active description runs opacity 0.45s ease-in-out with a 500ms delay, so the new copy starts fading in exactly as the rotation decelerates out of its steepest phase and lands around 950ms in, just after the wheel has stopped moving. Five items at 72° each equals a full 360°. The wheel returns to item 1 as the pin releases.
Nothing else in the section moves. No dot pulse, no rotation drift, no background shimmer. If you sit still inside the pin, the wheel is completely inert. Which is the second thing worth stealing from this build. A wheel that idles reads as a loading spinner, and this one refuses to.
The scroll-scrubbed animation trick I keep coming back to
Most scrollytelling I have built (or watched other people build) starts with a GSAP timeline scrubbed to a ScrollTrigger. That is the assumed answer. It is also the expensive one. Timelines that live on the scroll bar are brutal to author, brittle to test, and painful to hand off to a client who wants to change the third card's copy six months later.
What MyHealthPrac's team did is cheaper than it looks, which is the highest compliment I know how to give a design decision. It is a CSS sticky pin, five items at fixed 72° increments, one 600ms tween, and one carefully chosen easing curve. The rest of the effect is trusting your easing function to lie for you.
The rest of the site earns the wheel
The reason this trick lands, and does not read as a cheat, is the stillness around it. Nine of fourteen sections on the page are flat fields of one color with type and one image. No gradients, no card lifts, no decorative motion. The 500+ biomarker ticker cards have no hover. The condition rows across six category columns have no hover. The thirteen FAQ questions have no hover. Someone measured the entire page and found exactly one authored transition duration on interactive elements. all 0.4s ease. Everywhere.
That is the ratio worth studying. Eleven sections were kept motionless so the twelfth could pin for five viewport-heights and be felt. Spend even a taste of that budget on card hovers and cursor effects, and the wheel becomes just another moving thing on a page full of moving things.
One honest tell
Underneath all this discipline there is a small crack worth naming, because it makes the rest more credible. The FAQ's + icon carries a hand-authored transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), a specific ease-out-quart curve. And nothing ever transforms it. Someone wrote the easing for a rotation that was never wired up. It is the kind of gap that comes from a small team running out of runway rather than out of taste, and it almost makes me like the site more.
What I am taking into my own work
Three things I am stealing.
When a scroll effect feels expensive to build, the answer might be threshold-stepping it and letting the easing curve do the pretending. A sine ease-in-out has no snap. That is the whole game.
Spend the ambient motion budget in one place, loud enough to be the reason someone remembers the page, instead of distributing it politely across every card and every hover.
The trick that most reveals a team's judgment is usually the one that is cheaper than it looks. If your effect is expensive AND legible, you have probably overbuilt it.
Want a site that spends its motion budget this well?
At Crazy Creative we build sites where every moving thing has to earn its place. The wheel on MyHealthPrac is only impressive because the rest of the page had the discipline to sit still. If you are building something that needs one signature scroll-scrubbed animation to carry the whole experience, or a page where the restraint has to be as art-directed as the spectacle, come talk to us. The studio lives at crazycreative.design.