Animation
72 bites tagged Animation — interview questions with model answers, and 60-second explainers.
Draggable Snap-Back Card with Gesture Handler and Reanimated
Shared values track offset, a Pan gesture updates them on the UI thread, an animated style applies translation, onEnd springs back to zero. gesture-driven animation.
Shared values and useAnimatedStyle in Reanimated
UseSharedValue holds a mutable .value readable on both threads, useAnimatedStyle derives styles as a worklet, mutate .value with withTiming or withSpring. Reanimated core hooks. reading .value during render to set state.
Animated API versus Reanimated architecture
Animated declares animations that the native driver runs, but logic and gestures cross the bridge; Reanimated runs worklets directly on the UI thread. Where animation work runs. saying both run fully on JS.
Animated.sequence versus Animated.parallel
Sequence runs animations one after another in order, parallel starts them at the same time. Composing multiple animations. thinking parallel waits for the slowest before others begin, or confusing them with stagger.
Build a mount fade-in with Animated API
Create an Animated.Value(0) in a ref, drive it with Animated.timing inside useEffect, bind it to opacity on Animated.View. Basic Animated API fluency. animating opacity via setState every frame.
CSS transition versus animation
Transitions interpolate between two states triggered by a change; animations use keyframes for multi-step, looping, autonomous motion. animation API fundamentals.
Respecting prefers-reduced-motion in a design system
Gate CSS animations behind the media query, read the same preference in JS via matchMedia, and centralize motion tokens. Building motion accessibility into system architecture. killing all motion instead of reducing it.
Building a Card Flip Animation in SwiftUI
Drive a flipped state, rotate both faces with rotation3DEffect, hide the back face. SwiftUI animation and 3D transform fluency. forgetting the back is mirrored or showing both faces at once.
Animate a SwiftUI Shape morphing point count
Expose a continuous sides value as animatableData so SwiftUI interpolates it, then compute the path from that fractional value each frame. Driving custom interpolation with animatableData.
Build an interruptible custom VC transition
A delegate vends an animator (UIViewControllerAnimatedTransitioning) for the visuals and an interactive controller (UIViewControllerInteractiveTransitioning) driven by a pan to scrub progress and… The custom transition protocol stack.
Build a custom circular progress bar in UIKit
Draw an arc with UIBezierPath, assign it to a CAShapeLayer path, set lineWidth and no fill, animate strokeEnd 0 to 1. Vector drawing with CAShapeLayer plus strokeEnd animation.
Implicit .animation() vs explicit withAnimation
.animation(value:) animates a view when a tracked value changes; withAnimation wraps the state mutation so all dependent views animate. How SwiftUI ties animation to state changes.
Building a custom implicitly animated widget
Extend ImplicitlyAnimatedWidget, use AnimatedWidgetBaseState, define tweens in forEachTween, read values in build. understanding the implicit animation machinery.
How do you translate Figma Smart Animate into CSS or JS?
Convert easing to cubic-bezier or library curves, match ms values, animate transform and opacity, escalate layout shifts to JS. Bridging design tools to code with fidelity.
Explain Figma Smart Animate's core principle and layer matching requirements
Tests Figma's layer-matching logic for prototyping. Great answers cover: name-based matching between frames, compatible layer types, and interpolated properties like position and size.
How do you create a smooth Canvas 2D loop with requestAnimationFrame?
Tests render pipeline timing. Outline: queue rAF per refresh; derive delta from timestamp for frame-rate independence; recurse each frame; cancel via cancelAnimationFrame. Red flag: claiming rAF locks 60fps, ignoring timestamp, or setInterval is fine.
React Native Gesture Handler: Native-Driven Touch
React Native Gesture Handler moves touch recognition to the native thread so gestures stay smooth when JavaScript is busy. Use it for swipeable cards and bottom sheets. The footgun is using it without Reanimated, gaining complexity without the frame-rate win.
MatchedGeometryEffect: Shared Element Hero Transitions
MatchedGeometryEffect lets two views share one spatial identity, so a thumbnail can appear to fly into a detail sheet across view hierarchies. It only works if both views exist simultaneously during a withAnimation block; otherwise the transition snaps.
withAnimation: The Implicit Animation Transaction
withAnimation wraps state changes in a transaction, telling SwiftUI to tween affected layout automatically. Call it from button actions or view model methods to animate many views from one state flip.
When would you implement a CustomPainter and how does shouldRepaint work?
Use CustomPainter for charts; check fields in shouldRepaint to skip frames; pass Listenable to bypass build layout. Knowledge of Flutter render pipeline repaint optimization.
Implement staggered animations using a single AnimationController and Interval
This tests multiplexing one ticker into sequential animations. Use one AnimationController, map each Tween to an Interval on distinct 0-to-1 sub-ranges, and rebuild with AnimatedBuilder. Red flag: multiple controllers or manual forward chaining.
How does Tween work and how do you use ColorTween with Curves?
This tests value interpolation versus time remapping. A strong answer: Tween maps 0-1 to typed values; ColorTween lerps 2 colors; Curves.easeInOut warps input time before interpolation. Red flag: claiming the curve alters the color output instead of timing.
Compare AnimatedBuilder and Transition widgets for explicit animations
Tests whether you know how explicit animations rebuild the widget tree and where to isolate animation effects. AnimatedBuilder rebuilds only its builder subtree, while Transition widgets rebuild their child when the animation ticks.
How do AnimationController and TickerProvider work together to drive animations?
Tests your grasp of Flutter's imperative animation engine. AnimationController stores value and direction; TickerProvider (via vsync) schedules frame callbacks; paired they emit 60–120 ticks per second.
Get Animation bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.