A small animation can make your interface feel polished or painfully slow. Good motion helps users understand changes, guides attention, and adds personality without getting in the way. Bad motion steals time and frustrates people. Here are hands-on rules and real tricks you can use today to make animations that work.
Prefer transform and opacity over top/left changes. Transforms run on the GPU and avoid layout reflows that kill frame rate. For example, scale a button on hover with transform: scale(1.06) instead of changing width or padding.
Animate as few properties as possible. Changing transform and opacity gives smooth results; animating box-shadow or height often drops frames. When you must animate complex properties, throttle them or fake the effect with layered elements.
Use will-change sparingly to hint the browser which element will animate, but remove it once the animation ends. Overusing will-change keeps elements promoted to layers and wastes memory.
Prefer CSS animations for UI transitions and requestAnimationFrame for JS-driven motion. CSS is declarative, simpler, and usually faster. Use requestAnimationFrame when you need precise control, chaining, or physics-based motion.
Respect reduced-motion preferences. Detect users' prefers-reduced-motion and skip or simplify nonessential animations. A simple media query like @media (prefers-reduced-motion: reduce) keeps motion-friendly for those who need it reduced.
Choose the right format. SVG is excellent for scalable vector motion like icons and illustrations. Lottie works great for complex timeline animations exported from After Effects and keeps file sizes small when used correctly.
For Lottie, trim unused frames, remove hidden layers, and optimize JSON with a minifier. Lottie playback is lightweight, but bad exports can still bloat your app.
Test on real devices early. Desktop dev tools look great; a mid-range phone can tell a different story. Aim for steady 60fps on common devices rather than perfect scores on a flagship.
Break long animations into short states. Micro-interactions (150–300ms) feel snappy. Larger transitions (400–600ms) are fine for context changes, but avoid anything that forces a user to wait. Use easing curves that match intent: ease-out for entrance, ease-in for exits, and custom cubic-beziers for natural movement.
Keep animation code readable and reusable. Create utility classes for common effects (fade, slide, pop) and a central timing scale so you can tweak speed site-wide. Use timelines or small libraries when choreography gets complex, but avoid heavy animation frameworks for simple UIs.
Finally, measure what matters: perceived speed and error rates. If an animation helps a user complete a task faster or with fewer mistakes, it's doing its job. If it just looks pretty and causes waits, cut it.
Use these checks and habits and you’ll end up with motion that feels intentional, fast, and useful.
AI is transforming animation—speeding production, automating tasks, and fueling new creativity. Discover what's changing and why it matters for animators.