Safe Zoom and Scale Transitions

Part of Vestibular-Safe Motion Patterns in Accessible Motion Architecture.

The problem

A gallery opens images with a zoom: the thumbnail scales up to fill the screen over 600ms. A marketing page introduces each section by scaling it from 80% to 100% as it enters the viewport. A modal “pops” from 60% to 100%. Users report nausea, dizziness and, in one case, having to leave the site. The animations are compositor-only, short and carefully eased — and none of that addresses the problem.

Scale is the effect that most closely simulates self-motion, and it is the one that most often causes discomfort.

Root cause analysis: scaling looks like moving

Vestibular discomfort comes from a mismatch: the eyes report motion that the inner ear does not confirm. The stronger the illusion of self-movement, the stronger the mismatch.

Scaling simulates approach. An element growing on screen is the visual signature of something moving toward the viewer — or of the viewer moving toward it. When the scaled element covers a large share of the visual field, the brain reads it as the world moving, not an interface element resizing.

Area matters more than factor. Scaling a 40px icon by 1.3 changes a tiny part of the field. Scaling a full-screen image by 1.3 changes everything. The risk is roughly the product of the scale change and the share of the visual field affected, which is why the duration and distance thresholds are expressed relative to viewport share.

Slower is not safer. For travel, slower can be gentler. For large-area zooms the opposite holds: a longer zoom sustains the illusion. A large-area scale that must exist should be brief.

Zoom plus travel compounds. A thumbnail that both moves across the screen and scales up combines two triggers.

Scale on small elements is fine. Buttons, badges, icons and small cards can scale freely; they occupy a small part of the field and read as interface feedback rather than world motion.

Risk by scaled area, for a 1.3 scale changeThe same factor is unremarkable on a badge and provocative on a hero.Risk by scaled area, for a 1.3 scale changesafeacceptable, keep briefreviewavoid020406080100% of viewport at largestbadge 3% of viewport at largestcard 22% of viewport at largestfull-screen image 85% of viewport at largest
The same factor is unremarkable on a badge and provocative on a hero.

Step-by-step resolution

Making scale effects safeJudge by area first, then factor, then duration.Making scale effects safe1Measure each scaled element's share of the viewport at its largest.Area, not just factor2For anything over about a third of the viewport, remove the scale.The main risk removed3Cross-fade large surfaces instead of zooming them.Same transition, no approach illusion4Keep small-element scale factors modest and brief.Feedback without discomfort5Never combine a large scale with travel across the screen.No compounded triggers6Remove scale under reduced motion, keeping opacity changes.
Judge by area first, then factor, then duration.

Production code pattern

/* Small elements: scale freely, briefly. */
.badge { transition: scale var(--duration-100) var(--ease-standard); }
.badge:hover { scale: 1.08; }

/* Cards: modest scale, short duration. */
.card { transition: scale var(--duration-200) var(--ease-standard); }
.card:hover { scale: 1.02; }

/* Large surfaces: cross-fade, do not zoom. */
.lightbox__image {
  opacity: 0;
  transition: opacity var(--motion-enter-duration) linear;
  /* No scale: this image covers most of the viewport. */
}
.lightbox[data-state="open"] .lightbox__image { opacity: 1; }

/* Section entrances: translate a little, never scale the whole section. */
.section {
  animation: section-in var(--motion-enter-duration) var(--motion-enter-easing) both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}
@keyframes section-in { from { opacity: 0; translate: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  .badge:hover, .card:hover { scale: 1; }
  .badge, .card { transition: none; }
  .section { animation: none; }
  .lightbox__image { transition: opacity 120ms linear; }
}

Rendering Impact: composite in every case. The safe version is not more expensive — a cross-fade is cheaper than a full-screen scale, which also risks raster-scale blur on the enlarged texture.

Replacing the lightbox zoom with a cross-fade loses a little of the connection between thumbnail and full image. Where that connection matters, a view transition can morph the thumbnail’s box to the full image’s box, which reads as a shared element moving rather than the world zooming — and is still worth keeping brief.

Scale guidance by element sizeFactor limits tighten as the affected area grows.Scale guidance by element sizeSuggested maximum scale changeSuggested durationUnder reduced motionIcon, badge,button1.1100-150 msRemove scaleCard, tile1.03150-250 msRemove scalePanel, drawer1.02200-300 msRemove scaleFull-screensurfaceNoneCross-fade insteadCross-fadeBackgroundimage1.05 over 10s+ onlyVery slow or noneStatic
Factor limits tighten as the affected area grows.

Slow background zooms

The “Ken Burns” effect — a hero image slowly scaling over ten or twenty seconds — is a special case. It is large-area scaling, which the guidance above rules out, but it is also extremely slow, which weakens the illusion of approach. In practice a factor under about 1.05 over ten seconds or more is tolerated by most people, and it should still be removed under reduced motion and pausable where it runs for more than five seconds.

The safer alternative keeps the same visual interest without the zoom: a very slow translate of an oversized image, which moves detail across the frame without simulating approach. Either way, the effect belongs behind a preference check, and it should never be the only thing conveying that the page has loaded or changed.

Verification checklist

Constraints and trade-offs

  • Cross-fades lose the spatial connection that a zoom provides; shared-element morphs can restore some of it.
  • Removing the lightbox zoom changes a widely copied interaction pattern.
  • Scaling up promoted layers can blur their contents, an additional reason to avoid large factors.
  • Thresholds here are guidance, not standards; individual sensitivity varies widely.
  • Users who are not sensitive may find the safer version less impressive; the trade is worth it.

Frequently asked questions

Why is scaling more uncomfortable than moving?

Scaling simulates approach — something coming toward the viewer — which is a stronger illusion of self-motion than lateral movement, especially over large areas.

Is a small hover scale on a button a problem?

No. Small elements occupy a small part of the visual field and read as interface feedback rather than world motion.

Can I keep a full-screen zoom if it is fast?

Better not. Large-area scaling is the highest-risk pattern; cross-fade or morph the element’s box instead.

Are slow background zooms acceptable?

Small factors over ten seconds or more are usually tolerated, but they must still be removable under reduced motion and pausable.