Q184: View Transitions and Navigation Motion in React

What Interviewers Want To Evaluate

This question checks whether you can use motion to clarify navigation without hurting performance or accessibility. Interviewers want View Transitions, route changes, shared element transitions, reduced motion, layout stability, state preservation, and when animation is the wrong tool.

Senior answers should treat motion as product feedback, not decoration.

Short Interview Answer

View transitions let the browser animate visual changes between UI states or navigations. In React and Next.js, they can make route changes and shared elements feel continuous when used carefully. Good navigation motion should preserve orientation, avoid layout shift, respect reduced motion preferences, keep focus behavior correct, and never hide slow loading or broken state. Motion should support comprehension.

Detailed Interview Answer

Navigation can feel abrupt when large parts of a page change.

Motion can help users understand:

where content came from
what changed
what stayed stable
which item opened
which route replaced the current route

View transitions provide a browser-level way to animate between rendered states.

Shared Element Mental Model

Imagine clicking a card in a list and opening its detail page.

The card image can visually expand into the detail hero.

The user understands continuity.

This is useful for:

gallery to detail
table row to drawer
card to full page
thumbnail to media view
route tab indicator movement

Motion Is Not Loading

Motion should not be used to disguise slow data.

If a route waits, use loading boundaries.

If data fails, use error boundaries.

Motion helps transition between states that are ready or progressively prepared.

It is not a reliability layer.

Reduced Motion

Always respect user preference.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms;
    transition-duration: 0.001ms;
  }
}

For important UI, prefer reducing motion rather than removing orientation cues entirely.

Focus Management

Navigation motion must not break focus.

After route change:

focus should move predictably
screen reader should understand new page context
keyboard users should not be trapped in old content
modals should restore focus correctly
animated elements should not steal focus

Visual continuity and accessibility continuity both matter.

Layout Stability

Animations should avoid layout thrash.

Prefer compositor-friendly properties:

opacity
transform
clip-path carefully

Avoid animating layout-heavy properties when possible.

height
width
top
left
margin

Route Boundaries

In Next.js, route structure affects what persists and what transitions.

Persistent layouts can keep navigation stable.

Page segments can transition independently.

Suspense boundaries can prevent the whole screen from flashing.

The route architecture and motion architecture should agree.

Common Mistakes

A common mistake is animating everything.

Another mistake is ignoring reduced motion.

Another mistake is using motion to hide loading problems.

Another mistake is causing layout shift during transitions.

Another mistake is forgetting focus and screen reader behavior after navigation.

Senior Trade-Offs

Motion increases polish but also increases test surface.

Use it where it improves orientation or reduces cognitive load.

Skip it where the workflow values speed, density, or reduced distraction.

Enterprise tools often need restrained motion. Games or creative tools can carry more expressive motion.

Testing Workflow

Test navigation motion with:

normal motion
reduced motion
keyboard navigation
screen reader route announcement
slow network
loading boundaries
error boundaries
mobile viewport
high refresh and low power devices

Motion needs verification under real interaction conditions.

Debugging Workflow

When transition UX feels wrong:

check route boundary persistence
inspect layout shift
test focus movement
disable animations and compare clarity
check reduced motion behavior
profile animation frames
verify Suspense fallback placement
avoid animating unstable content

Interview Framing

Define view transitions, explain where they help, then cover reduced motion, focus, layout stability, route boundaries, and when to avoid animation.

Revision Notes

Motion should clarify state change. If it adds confusion, it is design debt.

Key Takeaways

Good navigation motion preserves user orientation without stealing control.

Follow-Up Questions

1. What are view transitions?
2. When are shared element transitions useful?
3. Why is motion not a loading strategy?
4. How do you respect reduced motion?
5. How can animation break focus behavior?
6. Which CSS properties animate best?
7. How do route layouts affect transitions?
8. When should motion be avoided?
9. How do Suspense boundaries affect motion?
10. How would you test navigation animation?

How I Would Answer This In A Real Interview

I would say view transitions can make navigation and shared elements feel continuous, but I would keep motion purposeful. I would respect reduced motion, preserve focus behavior, avoid layout-heavy animation, coordinate transitions with route and Suspense boundaries, and use motion to clarify rather than distract.