Animation
72 bites tagged Animation — interview questions with model answers, and 60-second explainers.
Custom fade-and-scale transition with PageRouteBuilder and GoRoute
Tests bridging imperative transitions to declarative routers. Use PageRouteBuilder with FadeTransition and ScaleTransition, set globally in theme or per route via GoRoute pageBuilder with CustomTransitionPage. Red flag: omitting child rebuilds the page.
Motion Tokens Turn Timing into a System
Motion tokens standardize animation like color tokens standardize palettes. A team can retime an entire product from one file. The footgun is naming tokens after CSS curves instead of intent, locking implementation details into your design language.
How do you structure and tokenize animation and transition values?
This tests semantic token architecture for motion. Structure duration and easing into tiered tokens: primitive values, semantic aliases like feedback or navigation, and component bindings. Avoid hardcoding values or using only raw milliseconds without meaning.
How should you adapt animations for prefers-reduced-motion?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible. Vestibular accessibility and media ergonomics. Ignoring the setting or using JS instead of CSS media features.
Svelte Transitions: Declarative UI Animation
Svelte transitions are declarative animations for elements entering or leaving the DOM. Use `transition:fade` on a modal or `crossfade` for items moving between lists. The footgun: they only run on mount/unmount, not on general state changes.
Vue Route Animations: Animating Page Changes
Animate between pages by wrapping your router view in a `<transition>` component, giving your SPA the feel of a native app. This is used for sliding or fading effects during navigation.
Realistic UI Motion with Easing Curves
Easing curves control animation acceleration to make UI motion feel natural, not robotic. Use 'Ease Out' for elements entering the screen and 'Ease In' for those leaving. The footgun is overusing one curve; this makes motion feel unnaturally perfect.
Prototype Animations: Guiding Users Between States
Think of prototype animations as visual storytelling, showing the relationship between a user's action and the resulting UI state. Use them to show menus expanding or pages sliding in.
Figma's Smart Animate: Motion Without Keyframes
Figma's Smart Animate creates fluid animations by tweening layers between frames. It's perfect for prototypes with expanding cards, sliding toggles, or parallax effects.
Designing for Reduced Motion
Treat UI animations as an enhancement some users must disable for comfort. The `prefers-reduced-motion` media query lets you respect system-level accessibility settings, preventing vestibular triggers.
Smooth Animations with requestAnimationFrame
Sync your code to the browser's repaint cycle for smooth, efficient animations with `requestAnimationFrame`. Use it for any visual change over time, like moving an element or running a game loop.
Reanimated Worklets: Run JS on the UI Thread
A Reanimated worklet is a JS function that runs directly on the UI thread, bypassing the bridge for 60fps animations. They're used in hooks like `useAnimatedStyle` to compute styles without dropping frames. The footgun: worklets capture their entire closure.
useAnimatedStyle: Link Shared Values to Component Styles
The `useAnimatedStyle` hook connects a shared value to a component's style, running animations on the UI thread. It's a reactive StyleSheet for dynamic properties like opacity or transform. The footgun: never mutate shared values inside the hook.
useSharedValue: State for High-Performance Animations
The `useSharedValue` hook creates state that lives on the UI thread, bypassing React's render cycle for animations. Use it with `useAnimatedStyle` to drive smooth, 60fps animations. The footgun: modifying a shared value won't re-render your component.
Shared Element Transitions: Morphing Views Across Screens
Morph a component from one screen to another during navigation. By giving two components the same `sharedTransitionTag`, Reanimated animates the view's properties (size, position) between screens for a seamless transition.
withTiming: Animate Values Over a Set Duration
withTiming is your CSS transition for React Native animations. You define a target value, a duration, and an easing curve to create predictable, time-based animations like fades or size changes.
useNativeDriver: Offload Animations from the JS Thread
useNativeDriver offloads animations from the JavaScript thread to the native UI thread for smoother performance. Use it in Animated API calls to prevent dropped frames.
Animated: Drive Styles with Values, Not Setters
React Native's Animated API lets you drive styles with a value, not manual setters. Use it for performant fades and slides. The biggest footgun is forgetting `useNativeDriver: true`, which keeps animations smooth by running them off the JS thread.
Animated.Value: The Driver for React Native Animations
Animated.Value is a single number that drives multiple UI properties, like one dimmer switch controlling many lights. Use it to fade, move, or scale components. The main footgun: you cannot read its value synchronously and must use an asynchronous listener.
React Native Reanimated: Off-Thread Animations
Reanimated moves animations off the busy JavaScript thread onto the native UI thread. This ensures smooth, 60-120 fps performance for gestures and transitions, even during heavy JS computation.
PanResponder: The Gesture State Machine
PanResponder turns raw touch events into a single, stateful gesture, like dragging an object. It's used to build draggable elements by providing a `gestureState` object with velocity and distance. The footgun is confusing `moveX/Y` with `dx/dy`.
CAKeyframeAnimation: Animating Through Key States
CAKeyframeAnimation defines animations with waypoints, not just a start and end. Think of it as a flipbook where you set key frames and the system interpolates. Use it for complex paths, like shaking an icon. Footgun: setting both `path` and `values`.
Custom UIViewController Transitions: Beyond the Defaults
A custom transition lets you choreograph the handoff between two screens, defining the exact animation. Use it for unique experiences like a card expanding to fill the screen.
Flutter's Physics Simulations: The Simulation Class
Flutter's `Simulation` class is the engine for physics-based animations, modeling a 1D object's position and velocity over time. It powers realistic scrolling, springs, and gravity effects.
Get Animation bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.