How to Zoom Into UI Without Making Viewers Dizzy

Zooming into a UI element is the most common technique in product videos — and the most commonly botched. A bad zoom makes viewers feel motion-sick. A good zoom focuses attention without anyone noticing it happened.

Why most zooms feel wrong

Three problems cause dizziness:

Linear easing — the zoom starts and stops abruptly, like a car slamming the brakes
No focal anchor — the entire frame scales, so everything moves and the viewer loses spatial orientation
Too fast or too far — zooming 300% in 0.5 seconds is disorienting regardless of technique

Rule #1: Always use ease-in-out

Never use linear zoom timing. The zoom should accelerate smoothly from rest, reach peak speed in the middle, and decelerate smoothly to rest.

Recommended easing curves:

CSS equivalent: cubic-bezier(0.4, 0, 0.2, 1) (Material Design standard)
After Effects: 75% influence on both keyframes
Generic: Any curve that spends ~30% of the duration accelerating, ~40% at speed, ~30% decelerating

The deceleration phase is more important than the acceleration. A zoom that "lands" softly feels controlled. A zoom that stops hard feels like a mistake.

Rule #2: Anchor to a focal point

When you zoom in, zoom toward a specific element — the button, the text field, the chart. That element should remain roughly stationary on screen while everything else moves away from it.

Technically: set the scale transform origin to the center of your target element, not the center of the frame.

This is crucial because it gives the viewer's eyes a stable reference point. Without an anchor, every pixel moves simultaneously, creating the same disorientation as spinning a camera.

Rule #3: Limit zoom depth

Maximum zoom levels before viewers lose context:

Full-screen to section: 150-180% (safe, comfortable)
Full-screen to element: 200-250% (use with clear easing)
Full-screen to text/detail: 300%+ (only with a staged zoom — pause in the middle)

If you need to go beyond 250%, break it into two zooms with a 0.5-1 second pause between. First zoom to the region (150%), pause for orientation, then zoom to the detail (another 150% relative).

Rule #4: Speed limits

Zoom duration by depth:

To 150%: 0.6-0.8 seconds
To 200%: 0.8-1.2 seconds
To 300%: 1.2-1.8 seconds (or use staged approach)

Faster than these ranges triggers motion discomfort in approximately 15-20% of viewers. Slower feels sluggish. Match the speed to the editorial intent — a "dramatic reveal" zoom should be on the slower end, a "look at this detail" zoom can be faster.

Rule #5: Hold after arrival

After a zoom completes, hold the frame for at least 1.5 seconds before any new motion or interaction. This gives the viewer time to re-orient and understand what they're now looking at.

The most common mistake: zooming in and immediately performing a click or starting a new animation. The viewer is still processing the spatial change and misses the action.

When NOT to zoom

Zoom is not always the answer. Avoid it when:

The target is already readable at current scale — zooming adds nothing
You'd zoom more than twice in 10 seconds — use cuts instead
The context matters — if the surrounding UI is part of the story (showing where a feature lives in the nav), a zoom removes that context
The video will be viewed on mobile — the screen is already small; zooming in further makes individual elements large but removes all spatial context

Alternative: highlight without zooming

Often you can draw attention without any scale change:

Dim everything except the target (overlay at 50% opacity with a cutout)
Add a subtle border or glow around the element
Animate the element itself — a slight scale-up of just the target (105%) while the rest stays static

These techniques communicate "look here" without any spatial disorientation. For generated product animations, this is often the default approach — highlighting UI elements in place rather than simulating a camera zoom.