Motion designer at Miro

As asked

A mobile app moves users from a list of cards to a detailed view. How would you design motion that helps comprehension rather than just looking polished?

Sample answer outline

Use motion to preserve object continuity: the selected card can expand or hand off into the detail surface so users understand where they went. Keep timing short, easing natural, and hierarchy clear so the transition does not delay the task. Define what moves, what fades, and what remains stable, then specify behavior for interruption and back navigation. Respect reduced-motion settings with an alternate transition that preserves orientation without large movement. Candidates who talk only about delight miss the core product motion goal: reducing cognitive load.

Expect these follow-ups

• How would you specify this for iOS, Android, and web engineers?
• What changes for a low-end device?
• How do you decide whether the motion is too slow?

As asked

A dashboard card can move from loading, to partial data, to complete, to error. How would you design the motion so users understand the state without being distracted?

Sample answer outline

A strong answer starts with information hierarchy, not animation taste. Loading should set expectation without pretending precision, partial data should reveal structure progressively, complete should settle quickly, and error should draw attention only enough to prompt recovery. The candidate should discuss duration, easing, stagger, interruption, and reduced-motion behavior. Interviewers look for restraint: motion should clarify continuity and state, not decorate the interface. A common miss is designing one beautiful transition while ignoring rapid state changes, network retries, or users who prefer reduced motion.

Expect these follow-ups

• How would this change for a finance dashboard that updates every second?
• What is your rule of thumb for when motion should be removed?
• How do you hand this off so engineering does not guess timings?

As asked

Walk me through how you apply the 12 principles of animation to UI motion design. Which ones do you reach for most often, and which ones do you deliberately avoid or limit in a product context?

Sample answer outline

Strong answer names principles like anticipation, follow-through, ease-in/ease-out, and staging as directly relevant to UI. Candidate explains why squash-and-stretch and exaggeration are usually inappropriate at full scale in product interfaces but can work subtly on icons or micro-interactions. Should also note that secondary action helps guide attention without distracting from the primary task.

Expect these follow-ups

• Give me a specific screen transition where you used anticipation, and describe the timing values you chose.
• How do you justify ease curves to an engineer who just wants a linear transition?

As asked

Explain how a cubic bezier easing curve works. If a product engineer hands you a CSS animation and complains it feels mechanical, what is the first thing you check and how do you fix it?

Sample answer outline

Candidate should explain that cubic-bezier(x1,y1,x2,y2) defines two control points that shape the rate-of-change curve over normalized time. A mechanical feel almost always means the curve is linear or close to it. Fix: shift to a standard ease-out (fast start, gentle landing) for exits and ease-in-out for transitions. Strong answers also mention that the specific handles matter, such as easeOutExpo for snappy response versus easeOutCirc for smoother arrivals.

Expect these follow-ups

• What is the difference between ease-out and ease-in-out, and when does each belong?
• How would you communicate the right curve to a developer who has never opened an animation tool?

As asked

An engineer asks why you specified transform and opacity in your handoff spec instead of letting them animate width, height, or top. Explain the technical reason and how you would demo the difference.

Sample answer outline

Transform and opacity are composited on the GPU and do not trigger layout recalculation or paint, so they run at 60 fps without blocking the main thread. Animating width, height, top, or left triggers a full reflow cascade that forces the browser to recalculate positions of every affected element. Demo: open DevTools Performance panel, record both versions, show the difference in the paint and layout flame chart bars.

Expect these follow-ups

• What is the will-change CSS property and when does it help versus hurt?
• How does clip-path animation compare to opacity in terms of GPU cost?

As asked

What is the prefers-reduced-motion media query, when does it activate, and how do you design a motion layer in your product that respects it without removing all animation?

Sample answer outline

prefers-reduced-motion: reduce activates when the user enables the OS-level accessibility setting for reduced motion. The right approach is not to eliminate animation entirely but to substitute vestibular-triggering motions (large translates, parallax, spinning, zooms) with simpler cross-fades or instant state changes. Durations should shrink rather than go to zero. Lottie and Rive support listening to the media query in JavaScript to skip to the end frame or swap to a static asset.

Expect these follow-ups

• Are there any animations that should never be suppressed even with reduced-motion enabled?
• How do you test reduced-motion behavior across iOS, Android, and the browser?