Question 1

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?

Accepted Answer

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.

Question 2

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?

Accepted Answer

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.

Question 3

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.

Accepted Answer

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.

Question 4

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?

Accepted Answer

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.

Question 5

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

Accepted Answer

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.

Question 6

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?

Accepted Answer

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.

Question 7

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

Accepted Answer

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.

Question 8

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.

Accepted Answer

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.

Question 9

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.

Accepted Answer

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.

Question 10

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

Accepted Answer

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.

Question 11

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

Accepted Answer

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.

Question 12

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

Accepted Answer

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.

Question 13

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

Accepted Answer

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.

Question 14

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?

Accepted Answer

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.

Question 15

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?

Accepted Answer

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.

Question 16

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?

Accepted Answer

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().

Question 17

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?

Accepted Answer

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.

Question 18

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?

Accepted Answer

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.

Question 19

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?

Accepted Answer

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.

Question 20

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?

Accepted Answer

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.

Question 21

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

Accepted Answer

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.'

Question 22

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?

Accepted Answer

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.

Question 23

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?

Accepted Answer

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.

Question 24

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?

Accepted Answer

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.

Question 25

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

Accepted Answer

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.

Question 26

You are designing a skeleton loading screen for a content feed. Walk me through your motion choices and what research or principles guide them.

Accepted Answer

Skeleton screens reduce perceived wait time by giving the user structural context immediately. Motion choices: a subtle left-to-right shimmer (gradient translate) moving at roughly 1.5 seconds per cycle signals active loading without being distracting. The shimmer direction should match reading direction. Candidate should note that the skeleton should closely match the actual content layout so the transition to real content is smooth. Avoid pulse animations that make the skeleton feel like it is breathing, which can feel eerie.

Question 27

Walk me through how you design a scroll-triggered animation for a marketing website, including how you decide what triggers, what the animation does, and how you ensure it is not terrible on mobile.

Accepted Answer

Use an Intersection Observer approach (not scroll event listeners, which fire too frequently) with a threshold that triggers when the element is 20 to 30 percent into the viewport. The animation should be a reveal, not a parallax that moves content the user has already read. On mobile: parallax is nearly always a mistake due to the scroll speed and reduced viewport. Reduced-motion users should see the content without animation. Also consider that iOS Safari's scroll behavior differs from Chrome and test both.

Question 28

When do you reach for ProtoPie and when do you use Principle? What does each tool do better and where does each break down?

Accepted Answer

Principle is faster for simple auto-animate transitions between Sketch or Figma frames, excellent for linear screen flows and quick portfolio demos, but limited for conditional logic or multi-state interactions. ProtoPie supports formulas, sensor inputs, component-level interactions, and device pairing for real-device testing, making it the right tool for complex gesture interactions, data-driven animation, or testing with a real phone in hand. ProtoPie has a steeper learning curve but far more expressiveness.

Question 29

You need to animate an icon from a hamburger menu to an X and back. What techniques are available, what are the tradeoffs, and how do you pick one?

Accepted Answer

Three main approaches: CSS transforms (rotate and scale the lines using keyframe animation, small file size, no extra assets), SVG path morphing (morph the three lines into two crossing lines, more expressive but requires matching path node counts), and Lottie or Rive (most expressive, supports any shape, but adds a runtime dependency). For a simple menu-to-X, CSS transform is usually the right call: rotate the top and bottom lines to form a cross and fade the middle line, zero dependencies, excellent performance, easy to implement.

Question 30

What is the difference between testing an animation on a Mac browser emulating a mobile screen versus testing on a real Android device, and why does it matter?

Accepted Answer

The Mac has a fast GPU and Chrome DevTools' device emulation does not replicate GPU bottlenecks, throttling, or the actual display refresh rate of target devices. A mid-range Android phone from 2021 may have half the GPU throughput and only a 60 Hz display, making complex filter animations or large Lottie files visibly drop frames. Real-device testing with Chrome DevTools remote debugging or Xcode Instruments reveals actual frame drops. Strong candidates mention testing on a representative low-end device, not just a flagship.

Questions

Applying Disney's 12 principles to UI motionRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Easing curve internals and cubic bezier choicesRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Which CSS properties are safe to animateRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Accessibility: prefers-reduced-motionRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Defining and designing micro-interactionsRole-specificeasyVery common

As asked

Sample answer outline

Expect these follow-ups

Choreographing screen-to-screen transitionsRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Writing a motion spec developers can actually useRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Portfolio: walk me through a logo animation you designedRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Portfolio: walk me through a UI animation you are most proud ofRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Situational: PM says the animation is too slowRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Make product motion accessibleRole-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

Hand off motion specs to engineeringRole-specificeasyCommon

As asked

Sample answer outline

Expect these follow-ups

Hand off a motion spec to engineersRole-specificeasyCommon

As asked

Sample answer outline

Expect these follow-ups

After Effects expressions for dynamic animationRole-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

Optimizing Lottie files for productionRole-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

Rive state machines for interactive animationRole-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

Setting and defending a motion performance budgetRole-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

Building a motion token systemRole-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

Choosing prototype fidelity for stakeholder reviewRole-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

Figma Smart Animate limitations in productionRole-specificmediumCommon

As asked

Sample answer outline