Engineering · 1 min read
Motion that helps, and how to turn it off
How we add rich animation to sites like this one without hurting performance or people who prefer reduced motion.
Radicand Labs, Design and engineering
This site moves a lot. Headlines rise into place, a field of points reacts to your cursor, and product cards tilt toward you. We like motion when it explains something. Here’s how we keep it from getting in the way.
Start visible
Every element on this site starts visible. The script that hides things before they animate only runs when the browser says motion is welcome. If JavaScript fails, or you’ve asked for reduced motion, you get a complete, static page.
@media (prefers-reduced-motion: no-preference) {
.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
}Animate the cheap properties
We animate transform and opacity, and almost nothing else. They run on the compositor, so they stay smooth even while the main thread is busy.
Stop when nobody’s watching
Canvas animations pause when they scroll out of view or the tab is hidden. An animation nobody can see is just a battery drain.
Clean up between pages
Page transitions mean scripts outlive the page that started them. Every listener we add is tied to an AbortController that we abort before the next page swaps in.