Animation is the difference between a website and an experience. Purposeful motion guides attention, communicates state changes, and creates emotional resonance. But animation without purpose is just decoration that hurts performance.
The Purpose of Motion
Every animation must serve one of four purposes: Guide attention (draw the eye to important elements), Communicate change (element entering/exiting/transforming), Provide feedback (confirming user actions), and Create continuity (smooth transitions between states). If an animation doesn't serve one of these purposes, remove it.
Animation Tool Selection
CSS transitions: best for simple state changes (hover, active). CSS @keyframes: best for looping, declarative animations. GSAP: best for complex timelines, scroll-triggered, and sequenced animations. Framer Motion: best for React component animations with layout transitions. Lottie: best for complex vector animations (designed in After Effects). Choose based on complexity and framework.
Performance: The 60fps Mandate
Only animate transform and opacity — these are GPU-composited and don't trigger layout or paint. Never animate width, height, top, left, or margin. Use will-change sparingly. Use requestAnimationFrame for JS animations. Implement IntersectionObserver to pause off-screen animations. Test on mid-range mobile — if it's smooth there, it's smooth everywhere.
Accessible Motion Design
Implement prefers-reduced-motion media query to disable or simplify animations for users with vestibular disorders. Never auto-play animations that involve large movement. Provide pause controls for continuous animations. Ensure content is accessible without animation (progressive enhancement). These aren't edge cases — 35% of adults experience motion sensitivity.
Design Principles
Easing: never use linear (feels robotic). Use ease-out for entrances, ease-in for exits. Duration: 200-500ms for micro-interactions, 300-800ms for transitions, 800ms+ only for storytelling. Stagger: delay sequential elements by 50-100ms for natural flow. Anticipation: slight reverse motion before the main action creates natural feel.
Common Patterns
Page transitions (fade + slide for SPA navigation), Scroll reveals (elements animate in as they enter viewport), Hover states (transform: scale(1.02) for subtle lift), Loading states (skeleton screens with shimmer animation), Notification entry (slide in from edge with spring easing), and Hero animations (staged entry of headline, subtext, CTA).
Conclusion
Web animation is a craft that balances aesthetic vision with technical discipline. Purposeful, performant, accessible animation transforms static interfaces into engaging experiences that users feel as much as see.