Motion designer role-specific interview questions

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?

As asked

Define what a micro-interaction is and describe how you designed one that meaningfully improved the user experience of a specific feature.

Sample answer outline

A micro-interaction is a single-purpose animation tied to a discrete user action or system event, with four components per Dan Saffer's framework: trigger, rules, feedback, and loops and modes. Strong answers describe a specific example such as a form field shake and border flush on validation error, explaining the trigger (submit with error), rules (200ms ease-out shake, 3 oscillations), feedback (red border persists until corrected), and why that was more effective than a toast notification.

Expect these follow-ups

• How do you tell the difference between a micro-interaction and decoration?
• What is the most common mistake teams make when adding micro-interactions?

As asked

You are designing the transition between a list screen and a detail screen in a mobile app. What motion principles guide the choreography, and how do you spec it for an engineer?

Sample answer outline

The key principle is shared element transitions or container transform: the tapped card expands to fill the screen, creating spatial continuity that tells the user where they came from and how to go back. Duration: 300 to 400ms with a decelerate-in curve. Other content enters sequentially after the container settles. Spec for engineer: provide the duration, easing, which element is the shared element, and what the fallback is when shared element transitions are not supported (cross-fade). Also document the return gesture behavior.

Expect these follow-ups

• What is the difference between a shared element transition and a hero animation?
• How does the Material Design motion spec handle this pattern and where do you disagree with it?

As asked

What does a complete motion spec look like? Walk me through every component you include when handing off a complex animation to an engineer.

Sample answer outline

A complete motion spec includes: a reference video or GIF at real device speed, exact duration in milliseconds for each animation, easing function specified as a named preset or cubic-bezier coordinates, delay and stagger values, which properties animate (transform, opacity, etc.), the trigger event, the fallback for unsupported environments, and reduced-motion behavior. If using spring physics, include stiffness, damping, and mass. Embed everything in the design file or a Notion doc linked from the Jira ticket. Oral handoffs alone are never sufficient.

Expect these follow-ups

• What happens when an engineer implements your spec and it still does not look right? Walk me through that conversation.
• How do you handle a spec for a platform where you cannot test yourself, such as a TV app?

As asked

Show me or describe a logo animation you designed. Walk me through the brief, your creative process, the technical constraints you worked within, and what you would change if you did it again.

Sample answer outline

Strong answer describes a clear brief (context: loading screen, brand stinger, social intro), shows awareness of timing constraints (under 3 seconds for a stinger), explains the motion rationale (why each element moves in the sequence chosen), and names the technical deliverable (Lottie for web, MP4 for social, AE project for broadcast). 'What I would change' demonstrates self-awareness and growth mindset rather than claiming the work was perfect.

Expect these follow-ups

• What file formats did you deliver and why did you choose those?
• How did the client or team react and did you iterate after the first review?

As asked

Walk me through a UI animation in your portfolio that you are genuinely proud of. Explain the problem it was solving, what you tried that did not work, and how you arrived at the final result.

Sample answer outline

Strong candidates choose something specific with a real UX rationale, not just something that looks impressive. They describe the user problem first (confusion about state change, missing affordance, dropped trust moment), then explain the iteration process including failed approaches, and quantify the outcome where possible. They should also describe the handoff and whether the production implementation matched the prototype.

Expect these follow-ups

• How did you measure whether the animation actually helped users or just looked better?
• What feedback from users or testing prompted you to iterate on the animation?

As asked

Halfway through development, the product manager reviews the app and says every animation feels sluggish and the app feels slow. How do you respond?

Sample answer outline

First, understand what 'slow' means: is it the duration of the animations, actual rendering performance drops, or a perception issue caused by missing immediate feedback before the animation starts? If duration: review against the motion spec and benchmark against platform HIG recommendations. If rendering: profile on a target device. If perception: check that the animation triggers on the first frame of user input, not after a network call. Candidate should demonstrate curiosity before jumping to a fix.

Expect these follow-ups

• At what point do you escalate versus solve this yourself?
• How would you measure whether your fix actually changed the user's perception of speed?

As asked

Your team wants a dramatic parallax onboarding animation. How do you make the motion accessible without stripping all personality from the product?

Sample answer outline

Start by identifying motion risks: vestibular discomfort, attention capture, reduced readability, and delayed task completion. Honour system reduced-motion preferences and provide a lower-motion variant that keeps sequencing and hierarchy through opacity, scale restraint, or instant state changes. Avoid large z-axis movement, endless loops, and motion behind text. Test the experience with real users where possible and with implementation constraints in mind. A senior motion designer frames accessibility as part of the creative brief, not a compliance tax at the end.

Expect these follow-ups

• Which motion patterns are most likely to trigger discomfort?
• How would you document reduced-motion behaviour in a spec?
• What if brand stakeholders insist the full animation is essential?

As asked

You have designed a complex loading-to-success animation for a fintech product. What does a good engineering handoff include?

Sample answer outline

A good handoff includes the states, triggers, timing, easing curves, delays, interruption rules, and reduced-motion variant. It should specify which elements are layout-affecting and which should animate on transform or opacity for performance. Provide a prototype or exported values, but do not assume a video is enough for implementation. Include acceptance criteria so QA can tell whether the motion is correct. Candidates who understand handoff speak in implementation-ready constraints while still protecting the intention of the motion.

Expect these follow-ups

• How do you handle an engineer saying the animation is too expensive?
• What should happen if the success response arrives before the loading animation finishes?
• How would you QA this across devices?

As asked

How do you hand off a motion-heavy interaction so engineers can implement it accurately across web and mobile?

Sample answer outline

The answer should include a prototype, but not rely on the prototype alone. Specify states, triggers, timing, easing curves, delays, interruption rules, token names, and fallback behaviour for low-power devices and reduced-motion users. Good candidates explain how they collaborate with engineers early to check platform constraints rather than throwing over an After Effects file. They should also mention acceptance criteria and a review loop using real builds, because motion often changes once it meets real data. The common trap is specifying pixels and frames without explaining the purpose of the movement.

Expect these follow-ups

• What do you include in the spec for interrupted gestures?
• How do you handle different animation APIs on iOS, Android, and web?
• When would you accept an implementation that differs from your prototype?

As asked

You need a value in After Effects to automatically respond to another property without manually keyframing. What tools do you use, and can you describe a specific expression you have written and why it was the right call?

Sample answer outline

Strong answer mentions pickWhip for simple property linking, then discusses writing JavaScript-based expressions such as loopOut('cycle') for repeating animations or wiggle(freq, amp) for organic movement. Candidate should name a real use case, for example linking a fill color to a slider control so the client can adjust the brand color without touching the timeline. Extra credit for mentioning value at time() for time-offset effects or toComp() for coordinate-space conversions.

Expect these follow-ups

• What is the difference between loopOut('cycle') and loopOut('pingpong')?
• Have you used expressions to connect motion to audio amplitude or data?

As asked

You export a Lottie animation from After Effects and it plays fine in the preview, but the engineer says it is 800 KB and jank on older Android devices. What is your diagnostic process and what do you change?

Sample answer outline

Candidate should mention using LottieFiles or lottie-inspector to profile which layers are heaviest. Key culprits: bitmaps embedded as base64 (use vector shapes instead), shape effects like trim paths on large path counts, excessive keyframe density, and unused layers left in. Fix: reduce keyframes using the After Effects keyframe reduction plugin or manual thinning, convert raster assets to vectors, and avoid merge paths on complex shapes. Should also mention splitting complex animations into multiple smaller files if one is truly unoptimizable.

Expect these follow-ups

• What is the difference between dotLottie and the standard Lottie JSON format?
• How do you decide when a Lottie is too complex and CSS or a GIF is actually better?

As asked

Describe how a Rive state machine works and walk me through a real interactive animation you built with one. What states did you define, what inputs triggered transitions, and how did you hand it off to the developer?

Sample answer outline

Strong answer explains that a Rive state machine is a graph of animation states connected by transitions fired by boolean, trigger, or number inputs. Candidate describes a concrete example such as a button with idle, hover, pressed, loading, and success states, names the inputs (for example isHovered boolean, onTap trigger), and explains how blend states smooth transitions between them. For handoff they should mention exporting the .riv file, documenting input names and types in a spec, and pairing with a short code snippet showing how the developer calls stateMachineInput.fire().

Expect these follow-ups

• When would you choose Rive over Lottie for a mobile app, and why?
• Have you ever had a state machine get out of sync in production? How did you debug it?

As asked

How do you define a performance budget for animations in a product, and how do you enforce it across a team that keeps adding more motion?

Sample answer outline

Strong answers define the budget in concrete terms: 60 fps target on mid-tier devices, no animation that blocks the main thread, total animation file size under a specific threshold (for example 200 KB per screen), and no CSS properties that trigger layout reflow. Enforcement strategies include a documented motion spec, automated Lighthouse CI checks in the pipeline, and a lightweight design review checklist. Candidate should note that enforcing requires buy-in from both design and engineering leads, not just a document.

Expect these follow-ups

• What specific CSS properties are safe to animate and which ones cause reflow?
• How do you balance a product manager's request for more delight with your performance constraints?

As asked

You are joining a company that has a design system with color and typography tokens but no motion tokens. How would you design and introduce a motion token system from scratch?

Sample answer outline

Start with an audit of existing animations across the product to find patterns and inconsistencies. Define token categories: duration (micro 100ms, short 200ms, medium 300ms, long 500ms), easing curves (enter, exit, standard, emphasized), and delay. Document them as named CSS custom properties or design-tool variables that map 1:1. Roll out in the design system documentation with usage rules (for example 'use micro for toggles, short for panel reveals') and work with engineering to add them to the codebase so both teams use the same vocabulary.

Expect these follow-ups

• How do you handle reduced-motion accessibility preferences in a token system?
• How do you get existing designers to adopt the tokens instead of hardcoding values?

As asked

You are presenting three competing motion concepts to the product team next week. What prototyping tool do you choose, at what fidelity, and why does that matter for the feedback you will get?

Sample answer outline

Candidate should explain that tool choice depends on the question being answered. For directional feedback on timing and feel, a quick Figma Smart Animate or ProtoPie prototype is fast and sufficient. For pixel-accurate production fidelity with real interactions, After Effects or Rive embedded in a native wrapper is better. Mixing high-fidelity motion in a low-fidelity UI causes stakeholders to fixate on the wrong things. Strong answers mention setting expectations before the review.

Expect these follow-ups

• Have you ever over-prototyped something? What happened and what did you learn?
• How do you share a prototype with a stakeholder who is not in your tool?

As asked

You have spec'd a transition using Figma Smart Animate and it looks great in the prototype. The engineer implements it and it looks completely different. What usually causes this gap and how do you prevent it?

Sample answer outline

Smart Animate matches layers by name and interpolates between them, but it does not expose cubic-bezier control points or handle physics-based spring curves, so the engineer's implementation is approximated. Prevention: always provide a supplemental spec with exact duration, easing type (spring vs bezier), and stagger values. A short screen-recorded reference video is the most reliable handoff artifact. Mention that Figma's spring preset maps only roughly to CSS or React Native spring parameters.

Expect these follow-ups

• How do you document spring animation parameters for a developer?
• What tool do you use if the gap between Figma and production is unacceptable on a critical interaction?

As asked

Explain what stiffness, damping, and mass mean in a spring animation system and how changing each one affects what the user sees.

Sample answer outline

Stiffness controls how quickly the spring tries to return to rest, higher values mean snappier, more aggressive motion. Damping determines how much the oscillation is absorbed, low damping causes bouncing while critical damping stops it cleanly. Mass controls inertia, higher mass makes the animation feel heavier and slower to start. Strong answers provide intuitive mappings such as 'low damping plus high stiffness gives a bouncy button press, while high damping plus moderate stiffness gives a confident modal slide-in.'

Expect these follow-ups

• How do you translate spring parameters from Framer Motion to a React Native Animated.spring() call?
• When should you use spring physics instead of a bezier curve?

As asked

When you stagger the entrance of list items, how do you determine the stagger delay and total duration cap, and what goes wrong if you get it wrong?

Sample answer outline

A common mistake is a constant stagger that grows too long as the list grows. Strong answers cap the total cascade time (usually under 400ms regardless of item count) and compute per-item delay as min(index * 30ms, maxDelay). Going too slow makes the UI feel sluggish and content feels like it is loading. Going too fast eliminates the spatial storytelling effect entirely. Candidate should note the stagger should always be shorter than the item's own duration so items overlap.

Expect these follow-ups

• How do you handle a stagger when the list reorders live, such as in a drag-and-drop?
• Do you use the same stagger for exit animations? Why or why not?

As asked

A product manager wants an animated illustration on the onboarding screen that plays once and then loops a subtle idle. A developer asks whether to use Lottie or Rive. How do you make that call?

Sample answer outline

For a simple play-once-then-loop, Lottie is simpler to author and deploy since it is a pure playback format with excellent tooling from the After Effects plugin. Rive is better when the animation needs to respond to user input or app state, because Rive's state machine allows the engineer to send events and switch animation states without shipping new files. Candidate should weigh file size (Rive's binary .riv files are typically smaller), runtime performance (Rive has a native C++ renderer), and team familiarity with the authoring tool.

Expect these follow-ups

• What happens to a Lottie file if After Effects effects are not supported in the renderer?
• How does dotLottie's .lottie container format change the Lottie workflow?

As asked

How do you organize a complex After Effects project so another motion designer can pick it up and modify it two months later without getting lost?

Sample answer outline

Candidate should mention using precompositions to group logical animation units, naming every layer descriptively rather than keeping 'Shape Layer 1', using color labels consistently (for example red for audio, green for master compositions), and creating a main composition that acts as the final assembly. Also mention using null objects as expression controls or camera rigs, keeping source assets in a clearly named folder structure in the project panel, and leaving a text layer in the project panel with notes about the structure.

Expect these follow-ups

• How do you version After Effects project files in a team environment?
• Have you ever inherited a chaotic AE project? How did you clean it up?

As asked

When do you build artwork as native After Effects shape layers versus importing from Illustrator or Figma, and what breaks each approach?

Sample answer outline

Shape layers are resolution-independent, directly animatable (trim paths, stroke width, path morphing), and required for Lottie export since AE effects on raster imports are unsupported. Illustrator imports are faster for complex illustrations but lose editability inside AE unless you convert to shape layers, which can produce bloated, nested structures. Figma SVG exports often contain duplicate paths and unnecessary groups. Strong candidates mention using a tool like Overlord or running Convert to Shapes on import and then cleaning the hierarchy.

Expect these follow-ups

• How does the trim paths feature work on a shape layer and when is it the right animation tool?
• What AE features are completely unsupported by the Lottie runtime?