Animation Resources for UI Design

Good UI animation resources are scattered across a dozen different sites. This page collects the ones that are actually useful: production-ready libraries, learning materials, and inspiration sources for adding motion to interfaces.

Animation libraries

Lottie (airbnb.io/lottie). The standard format for lightweight vector animations on the web. Designers create animations in After Effects, export as JSON with the Bodymovin plugin, and developers render them with the lottie-web player. File sizes are a fraction of GIFs, and the animations scale to any resolution.

GSAP (gsap.com). GreenSock Animation Platform is the most reliable JavaScript animation library. It handles timeline sequencing, scroll-triggered animations, morphing SVG paths, and complex easing curves. Free for most uses, with a paid license for some premium plugins. If you're writing animation code, GSAP is the default choice.

Framer Motion (motion.dev). React animation library from the Framer team. Declarative API that makes component enter/exit animations, layout animations, and gesture interactions straightforward. The best option if your project uses React and you want animation without managing raw CSS or GSAP timelines.

CSS animations. Don't overlook native CSS. For opacity transitions, transforms, and simple keyframe sequences, CSS handles everything you need with zero JavaScript and excellent performance. Use the transition property for state changes and @keyframes for looping or multi-step animations.

Pre-built animation assets

LottieFiles Marketplace (lottiefiles.com). Thousands of free and paid Lottie animations: loading spinners, success states, onboarding illustrations, icon animations. You can customize colors and speed before downloading. The quality varies, but the top-rated animations are production-ready.

Rive Community (rive.app/community). Growing library of interactive Rive animations that you can fork and customize. Particularly strong for interactive UI elements: toggles, buttons, navigation indicators, and character animations with state machines.

Lordicon (lordicon.com). Animated icon library with trigger-based animations (hover, click, loop). Icons are available in Lottie format and as a web component. The free tier includes 1,500+ icons. Good for adding subtle motion to navigation and action icons.

useAnimations (useanimations.com). Micro-animation library for common UI icons: hamburger-to-close, play-to-pause, bookmark toggle. Available as Lottie files and React components.

Learning resources

The 12 Principles of Animation (adapted for UI). Disney's original 12 principles still apply. The most relevant for UI: ease in/ease out, anticipation, follow-through, and staging. Search for "12 principles of UI animation" for articles that translate these film concepts to interface design.

An Interactive Guide to CSS Transitions (joshwcomeau.com). Josh Comeau's tutorial is the best single resource for understanding CSS transitions. Interactive examples, clear explanations, and practical advice.

GSAP Documentation (gsap.com/docs). GSAP's own docs are unusually good. The "Getting Started" guide takes you from zero to productive in an hour, and the codepen examples cover nearly every common animation pattern.

Rive tutorials (rive.app/learn). Official video tutorials covering the editor, state machines, and platform integration. Start with the "Getting Started" series and move to "State Machines 101."

Inspiration

Mobbin (mobbin.com). Search for specific interaction patterns across thousands of real mobile and web apps. Filter by animation type to see how top products handle transitions, loading states, and micro-interactions.

UI Movement (uimovement.com). Curated gallery of UI animations. Good for browsing when you need inspiration for a specific interaction pattern.

Dribbble motion tag (dribbble.com/tags/motion). Hit-or-miss quality, but the top shots demonstrate creative animation techniques. Treat it as inspiration, not as a practical reference for production UI.

Start creating animations in Rive

Start with CSS transitions for simple state changes, add GSAP or Framer Motion when you need more control, and use Lottie or Rive for complex illustrations and interactive elements. Most UIs need less animation than you think.