Motion designer domain knowledge interview questions

As asked

Why is 60 frames per second the standard animation target for mobile and web, and what does the user experience when the frame rate drops to 30 or 20 fps?

Sample answer outline

60 fps aligns with the refresh rate of most displays (60 Hz), giving each frame a budget of 16.67ms. At 30 fps, animation still looks fluid for most content but fast-moving elements begin to show stutter, which is particularly noticeable on touch interactions where the finger position and the animated element desync. Below 24 fps, animation feels choppy and disjointed to most users. On 120 Hz displays (ProMotion), 60 fps is now the floor and 120 is the target for native scrolling.

Expect these follow-ups

• How does a 120 Hz ProMotion display change your animation timing spec?
• What is the difference between a dropped frame and a frozen frame in terms of user perception?

As asked

What is the fundamental difference between a bezier easing function and a spring physics model, and how do you decide which to use for a given animation?

Sample answer outline

Bezier easing maps a fixed input (time) to output (progress) along a predefined curve with a fixed duration. Spring physics computes output from a differential equation based on stiffness, damping, and velocity, so the duration is determined by the parameters, not set in advance. Use bezier for predictable, timed sequences like page transitions where you need exact control over duration. Use spring for interactions that must feel responsive to gesture velocity (drag, release, bounce) or where natural physical feel matters more than timing predictability.

Expect these follow-ups

• Can a spring animation be used in a Lottie file?
• What breaks when you use a spring animation in a sequential choreography that relies on precise timing?

As asked

What are the core motion principles in Apple's Human Interface Guidelines and how do they influence the way you spec animations for iOS apps?

Sample answer outline

Apple HIG emphasizes: motion should be functional not decorative (inform, guide, and provide feedback), respect the user's motion preferences (Honor system accessibility settings), avoid gratuitous animation (if removing the animation would not hurt comprehension, consider removing it), and use platform-native animations where they exist (system keyboard, scroll, navigation stack). For spec, this means defaulting to standard UIKit or SwiftUI animations unless you have a strong reason to override and always providing a reduced-motion path.

Expect these follow-ups

• Where does the HIG say you should NOT override the default animation?
• How does Apple's guidance differ from Google's Material Motion principles on the role of duration?

As asked

Summarize the Material Design 3 motion system. What are its key easing curves, how does it categorize transitions, and where do you think it works well versus falls short?

Sample answer outline

Material 3 defines four easing types: Emphasized (a custom cubic-bezier curve for large, expressive transitions, not spring-based), Emphasized Decelerate (object enters the screen decelerating into position), Emphasized Accelerate (object exits by accelerating off screen), and Standard (for functional, smaller UI transitions). Duration tokens range from 50ms to 700ms with longer durations reserved for larger, more complex transitions. It categorizes transitions as Container Transform, Shared Axis, Fade Through, and Fade for different spatial relationships. The Emphasized curve has an initial fast deceleration followed by a long gentle tail, giving it an expressive feel without actual spring physics. It works well for its clear vocabulary and developer-ready token names but can feel rigid on platforms with strong native animation conventions.

Expect these follow-ups

• What is the Container Transform pattern in Material 3 and when is it the correct choice?
• How does the Material 3 emphasized easing curve differ from a standard ease-in-out?

As asked

What is the difference between frame-based animation and time-based animation, and why does it matter for cross-device consistency?

Sample answer outline

Frame-based animation advances one step per rendered frame, so on a 30 Hz device an animation runs at half the speed of a 60 Hz device. Time-based animation uses elapsed clock time to compute the animation position, so it reaches the end state at the same time regardless of frame rate (though it may skip frames on slow devices). Lottie is fundamentally frame-based by design, which is why you should always specify its frame rate property. CSS and JavaScript animations are time-based through requestAnimationFrame and the browser's timestamp.

Expect these follow-ups

• How does Lottie's frame-based nature affect how you author an animation that needs to feel smooth on a 120 Hz display?
• What is requestAnimationFrame and why is it preferred over setInterval for animation?

As asked

What is a spatial model in UI design and how should animation reinforce it?

Sample answer outline

A spatial model is the mental map a user builds of where screens and elements live relative to each other. Animation reinforces it by encoding directional relationships: screens that slide left to right signal a hierarchy (deeper to shallower), screens that push from the bottom signal a temporary overlay, and expand-collapse transitions signal that content is nested within its parent. When animation contradicts the spatial model (for example a modal that slides in from the left like a sibling screen), users lose their sense of where they are.

Expect these follow-ups

• What transition would you use for a settings screen accessed from multiple places in the app?
• When does the spatial model break down and what do you do then?

As asked

Name the keyframe interpolation types in After Effects and describe when you would use each one.

Sample answer outline

Linear: constant rate of change between keyframes, mechanical feel, rarely used in finished work. Bezier (auto and manual): curves the interpolation, the default for smooth animation. Easy Ease (keyboard shortcut F9): symmetrical slow-in slow-out, the most common starting point. Easy Ease In/Out (asymmetric): ease in only or ease out only for arrivals and departures. Hold: jumps instantly to the next value with no interpolation, used for frame-accurate cuts or looping holds. Roving: evenly spaces keyframes across a path for consistent velocity, useful for camera paths.

Expect these follow-ups

• What is the Graph Editor in After Effects and how do you use it to refine an Easy Ease keyframe?
• When would you use Hold keyframes in a UI animation context?

As asked

Describe the three stages of the browser rendering pipeline that are most relevant to animation: layout, paint, and composite. Which stage is most expensive and why?

Sample answer outline

Layout (reflow) recalculates the position and size of all affected elements, the most expensive stage because it can cascade through the entire DOM tree. Paint fills the pixels in each layer, cheaper than layout but still significant for large areas or complex gradients. Composite assembles the pre-painted layers on the GPU, the cheapest stage and the only one that can run on the compositor thread independently. Animating transform and opacity triggers only composite. Animating width, height, top, or color triggers layout or paint first, making them expensive.

Expect these follow-ups

• What CSS property forces a new compositing layer and when does creating too many layers become a problem?
• How do you use Chrome DevTools to confirm your animation is hitting only the composite stage?

As asked

Describe the high-level structure of a Lottie JSON file. What are the top-level keys and what does each one contain?

Sample answer outline

Top-level keys: v (Lottie spec version), fr (frame rate), ip and op (in-point and out-point defining the play range in frames), w and h (composition width and height), nm (name), and layers (the array of layer objects). Each layer has a ty (type: shape, solid, image, null, text, precomp), transform object with keyframed position/scale/rotation/opacity, and shapes array for shape layers. Understanding this lets a designer manually inspect or edit a Lottie file when the exporter produces a bug.

Expect these follow-ups

• What does the 'ip' and 'op' field control and how can editing them fix a Lottie that plays the wrong frame range?
• Where are embedded images stored in the Lottie JSON format?

As asked

What is the Web Animations API and how does it differ from CSS keyframe animations? When would you specify one over the other in your handoff?

Sample answer outline

CSS keyframe animations are declarative and parsed at style-recalculation time. The Web Animations API is imperative JavaScript that gives full runtime control: pause, reverse, seek to a specific frame, change playback rate, and listen to events like finish. WAAPI also enables more complex orchestration without CSS class toggling. Specify CSS for simple, state-triggered animations that do not need runtime control. Specify WAAPI when the animation must be seekable (scroll-linked), interruptible, or orchestrated dynamically.

Expect these follow-ups

• How does the Web Animations API relate to CSS scroll-driven animations?
• What is the browser support concern with WAAPI and how do you handle it?

As asked

How does Rive render animations on different platforms and why does that matter for visual consistency?

Sample answer outline

Rive uses its own rendering engine (written in C++) compiled to WebAssembly for web and as a native library for iOS and Android. This means the render output is consistent across platforms unlike SVG or CSS which rely on the browser's own rendering implementation. The Rive renderer handles vector graphics, gradients, clipping, and blending at runtime. This consistency matters when you need pixel-identical animations across platforms. The trade-off is a runtime dependency and a slightly larger initial bundle.

Expect these follow-ups

• What is the approximate gzip size of the Rive WASM runtime and how does that affect your decision to use it?
• Does Rive support text rendering and what are the limitations?

As asked

What are the perceptual thresholds a motion designer should know: below what duration is an animation imperceptible, above what duration does a UI animation feel slow, and what is the threshold for perceived lag on user input?

Sample answer outline

Below 100ms, changes feel instantaneous and no easing curve is perceptible. 100 to 200ms is the sweet spot for micro-interactions like toggle switches. 200 to 400ms for larger UI transitions. Above 500ms, users consciously wait for the animation to finish, which feels slow for frequent interactions. Input lag above 100ms is perceptible as a disconnection between touch and response. The Google Material guidance caps standard transitions at 300ms for this reason. Above 1000ms the animation is almost always content (like an onboarding animation) rather than UI feedback.

Expect these follow-ups

• How does perceived speed differ from actual speed, and what can you do to make a 400ms animation feel faster?
• Why do enter animations generally need to be slightly longer than exit animations?

As asked

What are the different ways to animate an SVG and what are the tradeoffs of each approach?

Sample answer outline

Three main approaches: SMIL (SVG's native animation spec) is deprecated in Chrome and should not be used. CSS animations on SVG elements are widely supported, easy for developers, but limited to properties CSS can target. JavaScript libraries like GSAP or anime.js give full control over SVG attributes including path data, which enables morphing and sequenced animations that CSS cannot do. Inline SVG (not img or object tags) is required for CSS or JS to reach the SVG elements. Strong answers note that GSAP has a free and paid tier and confirm the license before specifying it.

Expect these follow-ups

• What is the difference between animating an SVG as an img tag versus inline in the HTML?
• How does path morphing work and what constraint must both paths satisfy?