Motion that helps a marketing site, and motion that gets in the way

A visitor shouldn’t have to wait for an animation before they understand what your company does. They also shouldn’t need precise mouse control to reach a project link.

Motion can make a site feel considered. It can explain a change, connect two interface states or draw attention to something useful. Every effect also adds behaviour that somebody has to design, test and maintain.

Ask what the effect communicates

An expanding panel can show where new content came from. A loading indicator can acknowledge a request. A subtle transition can help a visitor notice that a filter changed the results.

A looping background pattern may be purely decorative. That’s a legitimate design choice, as long as it doesn’t interfere with reading or carry information people can’t get any other way.

Write the purpose in one sentence. If the only answer is that a competitor has something similar, reconsider the effect before you build it.

Keep the action stable

Cursor-following previews can work well on a project list, but the underlying link needs a stable target. Don’t move the clickable area away from the pointer, and don’t make a preview the only route to a project.

Provide an equivalent presentation for keyboard and touch users. On a phone, a poster or an inline preview may be easier to understand than a simulated hover.

The same principle applies to buttons. A decorative label movement shouldn’t hide the action during focus, wrap unpredictably or delay activation until a timeline finishes.

Scroll effects need a readable fallback

Pinned sequences and scroll-driven illustrations need testing on short viewports, zoomed layouts and long content. A design that fits one desktop screen may leave little room for copy on a phone.

Keep the reading order clear. Avoid making essential content available only at one exact scroll position. Browser find, anchor links and assistive technology should all have useful content to work with.

Transform and opacity are often the right properties to animate. They don’t make an effect free, though. Large composited layers and expensive effects can still cost a lot on some devices.

Design the reduced-motion version

Reduced motion isn’t a broken version of the page. It’s another supported presentation, and it needs designing as carefully as the default.

For a reveal, show the content immediately. For a decorative canvas, use a still frame or a static image. For a panel opening, a direct state change may be enough.

Avoid a global rule that strips out all animation without thinking about how the interface works. Some implementations rely on an animation finishing before they reveal content or clear state. Those dependencies need fixing, rather than being left to fail when motion is reduced.

Listen for changes to the preference when a long-running effect needs to react while the page is open. Keep a visible pause control for persistent motion where one is required. An operating-system setting doesn’t replace every control a visitor might need.