Animation
72 bites tagged Animation — interview questions with model answers, and 60-second explainers.
Staggered Animations: Choreographing UI Changes
A staggered animation is a domino effect for your UI. Instead of animating everything at once, you sequence animations with slight delays for a more fluid, polished feel. Use it for list items appearing one by one. The footgun is timing: too long feels slow.
AnimatedBuilder: Isolate Animation Rebuilds for Performance
Flutter's AnimatedBuilder rebuilds only the widgets that change during an animation, not the entire screen. Use it to embed a moving part within a larger static widget, like a spinning icon on a button, to maximize performance.
Flutter's Tween: The Recipe for Animation
A Tween is a recipe for animation, not the animation itself. It maps a 0.0-1.0 progress value to a concrete value, like a color or position. Use it with an AnimationController to smoothly transition a widget's properties.
AnimationController: The Conductor of Your Animation
An AnimationController is the conductor for your animation's timing. It produces values from 0.0 to 1.0 over a duration, letting you play, reverse, or stop animations. Use it to drive widgets like `SlideTransition`.
CurvedAnimation: Animate with Easing and Personality
CurvedAnimation makes animations feel natural by applying a timing curve to another animation. Instead of linear motion, widgets can ease-in or bounce. Footgun: Elastic curves can overshoot the standard 0.0-1.0 range, causing unexpected UI behavior.
TweenAnimationBuilder: Animate Anything Implicitly
TweenAnimationBuilder animates any widget property without a complex AnimationController. Just give it a target value, duration, and curve. Use it for one-off animations where a full controller is overkill.
AnimatedContainer: Simple UI Animations Without Controllers
AnimatedContainer is a 'fire-and-forget' animation widget. It automatically animates its own properties like size and color when they change. Use it for simple UI state changes, like a button that grows when tapped. It only animates itself, not its child.
PageRouteBuilder: Custom Routes Without the Boilerplate
PageRouteBuilder creates a custom page route on the fly, skipping the boilerplate of a full subclass. Just provide a `pageBuilder` for the screen's content and a `transitionsBuilder` for a unique animation.
Flutter Hero Animations: Guiding the User's Eye
A Hero animation makes a widget appear to fly from one screen to another, connecting two UIs. It's perfect for transitioning a thumbnail to a detail page, guiding the user's focus. The main footgun is using non-unique tags, which causes animations to fail.
View Transitions API: Animate Between DOM States
The View Transitions API lets the browser handle complex animations between page states. It simplifies transitions in Single-Page Apps and, for the first time, enables them for Multi-Page Apps. The main footgun is forgetting it's a progressive enhancement.
Build Accessible Animations with `prefers-reduced-motion`
`prefers-reduced-motion` lets you respect a user's system-wide request to minimize animations. Use this CSS media query to replace potentially jarring effects like zooms or parallax with simpler fades, preventing discomfort for users with vestibular disorders.
Scroll-driven Animations: Animate on Scroll, Not Time
Scroll-driven animations link an animation's progress to a scrollbar's position, not a clock. This is great for progress bars that fill as you scroll or elements that fade in as they enter the viewport. The main pitfall is confusing timeline types.
CSS Motion Path: Animate on a Curve
Think of `offset-path` as drawing a track for an element to follow. Use it for non-linear UI animations, like an icon following a curve. The footgun: the path itself doesn't cause motion; you must also animate `offset-distance` to move the element.
Hardware Acceleration: Getting Smooth CSS Animations
Use the GPU for smooth CSS animations by sticking to `transform` and `opacity`. This avoids costly CPU work like layout recalculations, keeping frame rates high. The footgun is animating properties like `width` or `left`, which cause jank.
CSS `will-change`: A Performance Hint, Not a Magic Wand
`will-change` tells the browser which properties you'll animate, letting it optimize rendering ahead of time. Use it to fix jank in complex transitions, but never apply it preemptively—overuse wastes memory and can make performance worse.
CSS `perspective`: Creating 3D Depth
The CSS `perspective` property sets a 'camera' distance for 3D-transformed children, creating a sense of depth. Use it on a container to make elements appear to recede into the screen. The main footgun: a smaller value creates a *more* dramatic effect.
CSS 3D Transforms: Adding Depth to the DOM
CSS 3D transforms treat flat elements like objects in a 3D space, adding depth with properties like `rotateY` and `translateZ`. Use them for card-flip animations or product carousels. The footgun: forgetting to set `perspective` on a parent makes 3D look flat.
animation-fill-mode: Hold Styles Before and After Animation
The `animation-fill-mode` property prevents the jarring "snap" back to an element's original state after a CSS animation. Use `forwards` to hold the final state or `backwards` to apply the start state during a delay.
CSS Cubic-Bezier: The Art of Animation Pacing
A cubic-bezier function defines an animation's speed curve, controlling its acceleration and deceleration. It's used in CSS to make UI motion feel natural. The footgun is mistaking presets: `ease` accelerates more sharply than the symmetrical `ease-in-out`.
CSS Keyframe Animations: Multi-Step Motion Control
Think of CSS keyframes as a flipbook for your UI. You define styles at specific moments, and the browser animates between them. It's for multi-stage sequences, like loading spinners, where simple transitions fall short.
CSS 2D Transforms: Move, Rotate, and Scale Elements
CSS transforms let you move, rotate, scale, and skew elements without affecting the document's layout flow. Use it for UI animations like hover effects or modal pop-ups.
CSS Transitions: Animating State Changes
CSS transitions turn abrupt style changes into smooth animations. Instead of a button's color snapping on hover, it fades gracefully. Use this for visual feedback on state changes like `:hover` or when adding classes with JavaScript.
Android View Animation: A Blueprint for Motion
Think of Android's view-based animations as a pre-written score. You define the animation (the "score") in an XML file, then apply it to a View (the "instrument") in your code. This is used for animating properties like alpha or translation on UI elements.
MotionLayout: Animate Layouts with States, Not Code
MotionLayout animates layouts by describing start and end states in XML, letting the system handle the transition. Use it for complex UI choreography, like a collapsing toolbar, or to link animation progress to a user's swipe.
Get Animation bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.