Motion & Animation

Yes, measurably. Every animated element adds JavaScript, CSS, or video weight, and animation that runs on the main thread can delay Largest Contentful Paint by 200-800ms on mid-range mobile devices. On Shopify, hero autoplay video is the most common LCP killer; replacing it with a static image plus a small play-button overlay typically recovers a second of perceived load time.

Add a clear loading state to your cart and checkout transitions. Visitors abandon when they don't know whether their click registered, and a skeleton screen or spinner that appears within 100ms of the click consistently lifts checkout completion by 1-3%. It's a 30-minute change with no design debate.

Not always — but make it muted, under 8 seconds, under 2MB, and never the LCP element. If the video is your brand identity, keep it but lazy-load it below the hero. If it's there 'because it looks premium', test removing it. In our benchmark range, muted short loops are roughly neutral; everything louder or longer hurts.

Neither, in most cases. Google indexes the underlying DOM regardless of fade-in timing, and users perceive scroll-triggered reveals as slightly slower than instant rendering. They look polished in a Figma demo but tend to be conversion-neutral at best. Skip them on revenue templates (PDP, PLP, checkout) and reserve them for editorial or brand pages.

It's a hard constraint, not a nice-to-have. Respect the prefers-reduced-motion CSS media query: visitors who enable it on their OS should see static fallbacks for every non-essential animation. Around 20-35% of users have it enabled, and ignoring it is both an accessibility failure and, in the EU, a potential European Accessibility Act issue from 2025.

It hurts more often than it helps on mobile. Smaller viewports mean ambient animations occupy a larger share of the screen, and mobile CPUs render motion less smoothly, which reads as 'cheap' rather than premium. Keep mobile motion to functional micro-interactions (button feedback, drawer transitions) and turn off decorative animation under 768px.

These can work well on PDPs because the motion is informational — it shows how a fabric drapes or how a swatch looks on skin. Keep them under 3 seconds, loop seamlessly, and ensure the first frame is a usable static image so social previews and slow connections don't break. Apparel and beauty stores often see 2-4% lift on the variant where animated media replaces a second static image.

Yes, with limits. A first-visit exit-intent slide-in typically captures 1-3% of would-be abandoners, and the motion itself helps it register. The animation needs to be a single, short slide — not bouncy, not repeated — and the popup should fire at most once per session. Repeat firing is where the conversion gain reverses.

Run a server-side or feature-flagged A/B test that removes the animation entirely for 50% of traffic, and measure primary CTA click-through and downstream conversion for at least two weeks. If your analytics also tracks rage clicks and dead clicks (Metricuno does this out of the box), watch for elevated rage-click rates near the animated element — that's a strong signal it's interfering with intent.

Motion is one lever inside attention optimization, alongside visual hierarchy, contrast, copy density, and whitespace. The shared principle: attention is finite, so every page element should either earn its claim on it or be cut. Motion is the highest-cost claim because it overrides the user's gaze reflexively — which is exactly why deliberate, sparing use of it works so well when it does.