Top 30 Animation Interview Questions and Answers
30 multiple-choice questions on Animation, drawn from 30 bites out of the 72 tagged Animation on Tezvyn. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
What is the key benefit of requestAnimationFrame for animations over traditional timers like setTimeout?
Show the answer
Answer: c · It ensures animation updates are synchronized with the browser's display repaint cycle.
The primary advantage of requestAnimationFrame is its synchronization with the browser's repaint cycle, preventing dropped frames and wasted work. Option A is incorrect because achieving consistent speed across refresh rates requires manual calculation using the provided timestamp, not an automatic guarantee.
Read the full bite: Smooth Animations with requestAnimationFrame
Question 2 of 30
When dragging an element with PanResponder, which gestureState properties should be used to update its position based on the total distance moved from the gesture's start?
Show the answer
Answer: b · gestureState.dx and gestureState.dy
The card explicitly states that 'dx and dy are perfect for this because they represent the total change from where the drag started, not the absolute screen coordinates.' moveX/Y represent absolute screen coordinates, not the accumulated distance from the drag's origin.
Question 3 of 30
What is the primary reason to choose React Native Reanimated for animations involving user gestures or heavy JS computation?
Show the answer
Answer: c · It allows animation logic to execute independently on the native UI thread, preventing stuttering.
The card explicitly states that Reanimated moves animation logic off the JavaScript thread onto the native UI thread, allowing animations to run smoothly at 60-120 fps even when the JS thread is busy. Option A is incorrect because the card mentions Reanimated introduces its own concepts, implying it's not always simpler, and its core benefit is performance, not code brevity.
Read the full bite: React Native Reanimated: Off-Thread Animations
Question 4 of 30
When setting up a Smart Animate transition, which practice ensures a button smoothly tweens its width and corner radius between two frames?
Show the answer
Answer: d · Naming the button layer identically in both frames and using compatible types
Smart Animate matches layers by exact name across frames and interpolates properties like width and corner radius only between compatible types. Identical hierarchy and auto layout are not required, and raster images cannot morph vector properties.
Read the full bite: Explain Figma Smart Animate's core principle and layer matching requirements
Question 5 of 30
Which pattern best respects prefers-reduced-motion while preserving essential functional feedback?
Show the answer
Answer: a · Make decorative motion opt-in with the media feature and convert functional motion to instant state changes or static equivalents
The correct strategy scopes decorative motion inside @media (prefers-reduced-motion: no-preference) so it is opt-in, while preserving functional cues by making them instant or replacing them with static indicators. Option C is tempting because wrapping in no-preference is correct for decorative motion, but suppressing all visual changes removes essential feedback like loading states.
Read the full bite: How should you adapt animations for prefers-reduced-motion?
Question 6 of 30
A team needs to make all feedback animations faster while keeping navigation timing unchanged; which token strategy achieves this?
Show the answer
Answer: c · Update the feedback-duration semantic alias while leaving navigation-duration intact
Updating the feedback-duration semantic alias retargets every feedback component without affecting navigation, because semantic tokens separate intent from raw primitives. Reducing the underlying 300ms primitive globally would also speed up navigation animations that reference it, violating the requirement.
Read the full bite: How do you structure and tokenize animation and transition values?
Question 7 of 30
Which scenario best illustrates an appropriate use case for CSS transitions?
Show the answer
Answer: a · Smoothly fading a button's background color when a user hovers over it.
CSS transitions are designed for smoothly animating simple property changes, such as a button's background color on hover, as described in the card's canonical example. Complex, multi-stage animations are better handled by CSS Animations (@keyframes), and transitions are not for instant changes or page load optimization.
Read the full bite: CSS Transitions: Animating State Changes
Question 8 of 30
When adding a custom fade-and-scale transition to a GoRoute, which detail is essential to avoid rebuilding the destination page on every animation frame?
Show the answer
Answer: d · Use GoRoute.pageBuilder and return a CustomTransitionPage, passing the child into the transitionsBuilder.
CustomTransitionPage provides a transitionsBuilder whose child parameter is the pre-built page, so nesting it in FadeTransition and ScaleTransition avoids per-frame rebuilds. Option A is wrong because constructing the destination widget inside transitionsBuilder rebuilds the entire route on every animation tick.
Read the full bite: Custom fade-and-scale transition with PageRouteBuilder and GoRoute
Question 9 of 30
What is a fundamental characteristic of CSS 2D transforms regarding an element's position and surrounding content?
Show the answer
Answer: b · They visually alter an element's appearance (e.g., position, size) but do not change its occupied space in the document flow.
CSS 2D transforms visually manipulate an element without affecting its original space in the document flow, meaning surrounding elements are not re-laid out. Option C is incorrect because transforms specifically avoid triggering costly re-layouts and do not cause surrounding elements to reflow.
Read the full bite: CSS 2D Transforms: Move, Rotate, and Scale Elements
Question 10 of 30
Which scenario best demonstrates the necessity of using CSS keyframe animations over CSS transitions?
Show the answer
Answer: b · Creating a loading spinner that continuously rotates and changes color through several distinct hues.
Keyframe animations are designed for multi-step sequences with intermediate states, such as a loading spinner with continuous rotation and color changes. Simple CSS transitions are limited to animating between two distinct states.
Read the full bite: CSS Keyframe Animations: Multi-Step Motion Control
Question 11 of 30
Which animation scenario is the most appropriate use case for MotionLayout?
Show the answer
Answer: c · A complex UI element, like a collapsing toolbar, smoothly transitioning between expanded and collapsed states based on scroll.
MotionLayout is designed for complex, multi-element UI choreography and interactive animations, such as a collapsing toolbar transitioning between states based on user scroll. Simple, one-off animations on a single view, like a button press effect or a fade-in, are better handled by simpler APIs like ViewPropertyAnimator or ObjectAnimator.
Read the full bite: MotionLayout: Animate Layouts with States, Not Code
Question 12 of 30
For an element entering the screen, why is "ease-out" typically a better choice than "ease-in"?
Show the answer
Answer: a · "ease-out" begins quickly and then slows down, guiding attention and smoothly settling the element.
The card explains that "ease-out" starts fast and then gently slows to a halt, which is ideal for elements entering the screen to grab attention and allow comfortable processing of the final state. Conversely, "ease-in" would feel sluggish as it starts slow and speeds up, which is not suitable for an element appearing on screen.
Read the full bite: CSS Cubic-Bezier: The Art of Animation Pacing
Question 13 of 30
A developer animates a notification sliding into view. To ensure it remains visible after the animation completes, which animation-fill-mode value should be applied?
Show the answer
Answer: d · forwards
The 'forwards' value ensures the element retains the styles from the last keyframe after the animation completes, preventing it from snapping back to its original state. 'none' is the default and would cause the notification to revert to its off-screen position.
Read the full bite: animation-fill-mode: Hold Styles Before and After Animation
Question 14 of 30
After loading an XML-defined Property Animation, which method is used to specify the target View that will be animated?
Show the answer
Answer: b · Animator.setTarget()
The card explicitly states that after loading the Animator object, you call setTarget() on that object to link it to your target View. View.startAnimation() is used for the older View Animation system, not for Property Animations.
Read the full bite: Android View Animation: A Blueprint for Motion
Question 15 of 30
A developer applies `transform: rotateY(45deg);` to an element, but it still appears to skew in 2D rather than rotate in 3D. What is the most likely missing CSS property?
Show the answer
Answer: b · perspective on a parent element
The card states that forgetting to set `perspective` on a parent makes 3D movement look like a flat 2D skew. Without `perspective`, the browser cannot establish the necessary depth for true 3D rendering. `transform-style: preserve-3d` is for children to participate in the parent's 3D space, not for the parent's initial 3D appearance.
Read the full bite: CSS 3D Transforms: Adding Depth to the DOM
Question 16 of 30
How does the numerical value of the CSS perspective property influence the perceived depth of 3D transformed elements?
Show the answer
Answer: c · A smaller value results in a more dramatic and distorted 3D appearance.
The card explicitly states that "a smaller value creates a more dramatic effect" and "small values cause a large transformation," akin to pressing your face close to a screen. Option A is a common misconception, as a larger perspective value simulates a greater distance from the viewer, resulting in a flatter, less distorted 3D scene.
Question 17 of 30
Why should the Animated.Value driving a fade-in be stored in a useRef rather than declared as a normal variable in the component body?
Show the answer
Answer: a · useRef keeps the same value instance across re-renders so the animation is not reset
A plain local variable is recreated on every render, resetting the animation; useRef persists one instance. useRef does not by itself move work to the native thread, that is useNativeDriver.
Question 18 of 30
When is the most appropriate time to apply the `will-change` CSS property to an element?
Show the answer
Answer: a · Just before an animation is expected to start, and then remove it once the animation completes.
The card explicitly states that `will-change` should be applied with JavaScript just before an animation and removed once it completes. Applying it generally or preemptively (like option C suggests) is warned against, as it can lead to worse performance due to wasted memory.
Read the full bite: CSS `will-change`: A Performance Hint, Not a Magic Wand
Question 19 of 30
You want a card to fade in and scale up at the same time as a single visual entrance. Which composition helper fits, and why not the other?
Show the answer
Answer: b · Animated.parallel, because it starts both the opacity and scale animations simultaneously
Parallel starts all child animations at once so fade and scale read as one entrance. Sequence would run them one after the other, and stagger intentionally offsets the start times.
Read the full bite: Animated.sequence versus Animated.parallel
Question 20 of 30
Why are CSS animations using 'transform' and 'opacity' generally smoother than those using properties like 'width' or 'left'?
Show the answer
Answer: b · The browser can create a separate compositing layer for elements animated with these properties, allowing the GPU to handle the animation without affecting layout.
The card explains that 'transform' and 'opacity' allow the browser to promote an element to its own compositing layer, which the GPU can then manipulate efficiently without involving the CPU or affecting page layout. This offloading to the GPU and avoidance of layout recalculations is key to smooth animations. Option C is a tempting distractor because these properties do avoid reflows, but it incorrectly states the animation happens 'directly on the main thread' rather than being offloaded to the GPU.
Read the full bite: Hardware Acceleration: Getting Smooth CSS Animations
Question 21 of 30
Why can Reanimated keep a gesture-driven animation smooth even when the JavaScript thread is busy, while the legacy Animated API often cannot?
Show the answer
Answer: d · Reanimated runs the animation logic as worklets on the UI thread instead of round-tripping through the JS bridge
Reanimated executes worklets and reads shared values on the UI thread, avoiding the asynchronous bridge for per-frame logic. The legacy API must cross the bridge for reactive or gesture-driven values, so a blocked JS thread stalls it.
Read the full bite: Animated API versus Reanimated architecture
Question 22 of 30
Which property must be animated to make an element traverse the trajectory defined by `offset-path`?
Show the answer
Answer: c · offset-distance
The card explains that `offset-path` lays down the track, but `offset-distance` is the 'train engine' that moves the element along that track. While `transform` or `top`/`left` are used for other types of animation, they do not control movement along an `offset-path`. `offset-rotate` controls the element's orientation, not its progress along the path.
Question 23 of 30
You wrap showPanel = true inside withAnimation, and three different views read showPanel. What animates?
Show the answer
Answer: d · All three views, since each depends on the state changed in the closure
withAnimation animates every view whose body depends on state mutated inside its closure. It is not limited to the call site, and unlike .animation(value:) it takes no value argument.
Read the full bite: Implicit .animation() vs explicit withAnimation
Question 24 of 30
In Reanimated, what is the correct way to animate a component when a shared value should move to a new target?
Show the answer
Answer: d · Assign sharedValue.value to withTiming or withSpring of the target inside an event handler
You mutate the .value property, wrapping the target in an animation helper like withTiming so the UI thread interpolates smoothly. Reading .value into React state defeats the off-thread model and risks stale values.
Read the full bite: Shared values and useAnimatedStyle in Reanimated
Question 25 of 30
Which animation scenario is LEAST appropriate for implementation using a CSS scroll-driven animation?
Show the answer
Answer: d · A small icon that rotates indefinitely to indicate an ongoing background process.
Scroll-driven animations link an animation's progress to the scrollbar's position, making them ideal for effects like progress bars, fade-ins on scroll, and parallax. A loading spinner that rotates indefinitely is an animation independent of user interaction and should use a traditional time-based animation, not a scroll-driven one.
Read the full bite: Scroll-driven Animations: Animate on Scroll, Not Time
Question 26 of 30
In a custom UIViewController transition, which action is essential to signal the system that the handoff between view controllers is finished?
Show the answer
Answer: b · Calling context.completeTransition() within the animation's completion handler.
The card explicitly states that calling context.completeTransition() in the animation's completion block is critical to signal that the handoff is finished. While other options like adding the 'to' view or defining duration are necessary parts of the transition, they do not fulfill the role of signaling completion to the system.
Read the full bite: Custom UIViewController Transitions: Beyond the Defaults
Question 27 of 30
Which CAShapeLayer property do you animate to make a circular progress ring fill from empty to a given percentage?
Show the answer
Answer: d · strokeEnd, animated from 0 to the fraction representing progress
strokeEnd controls how much of the stroked path is drawn, so animating it from 0 to the progress fraction fills the ring. fillColor fills the interior disc, and rebuilding the path each frame is unnecessary and inefficient.
Read the full bite: Build a custom circular progress bar in UIKit
Question 28 of 30
In a swipe-driven dismissal, which object is responsible for mapping the pan gesture's progress to the transition and deciding to finish or cancel on release?
Show the answer
Answer: d · The interaction controller conforming to UIViewControllerInteractiveTransitioning
The interaction controller, typically a UIPercentDrivenInteractiveTransition, scrubs progress with update and resolves with finish or cancel. The animator only defines what the transition looks like, not how the gesture drives it.
Read the full bite: Build an interruptible custom VC transition
Question 29 of 30
When implementing prefers-reduced-motion, what is the most important consideration for UI animations?
Show the answer
Answer: c · Replacing potentially jarring animations with gentler, less disruptive alternatives to maintain clarity.
The card states the goal is to REDUCE motion by replacing jarring animations with gentler ones, not to eliminate all motion. Removing essential animations (Option D) can break UI understanding.
Question 30 of 30
Why can't SwiftUI animate directly between a triangle Shape and a pentagon Shape, and what makes animatableData work instead?
Show the answer
Answer: b · There is no vertex correspondence between mismatched paths; animatableData interpolates one numeric parameter that regenerates the path
Two paths with different point counts have no defined point-to-point mapping to tween. animatableData exposes a single VectorArithmetic value SwiftUI interpolates, and path(in:) rebuilds geometry for each intermediate value, producing the morph.
Read the full bite: Animate a SwiftUI Shape morphing point count
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.