Motion is one of the most powerful tools in web design and one of the easiest to overdo. Used well, it shows people where to look and how things relate. Used badly, it's a loading screen with extra steps.
Start with a motion brief
Before we animate anything we write down what each movement is for: revealing hierarchy, connecting two states, or giving feedback. If an animation doesn't have a job, it doesn't ship.
Choose the right tool
We split motion into two systems. Scroll-driven sequences use GSAP and ScrollTrigger, where precise timelines matter. Small interface states — hovers, tabs, toggles — use a lightweight declarative library. Keeping them separate stops the two from fighting over the same element.
We also only animate transform, opacity and filter. Anything that triggers layout will eventually stutter on a mid-range phone.
Respect reduced motion
Every animation on our sites sits behind a prefers-reduced-motion check. Visitors who opt out get the same content, already in place, with no parallax or looping effects. It's a small amount of extra work that makes the site usable for far more people.