Libraries / JavaScript

• useAnimations - Micro-animation icon library.

Resources for inspiration / Sites

• Tympanus codrops – Interactive demos and experiments.

• Codyhouse – Interactive demos and experiments.

• Dribbble – Animated shots category on Dribbble.

• Codepen – HTML/CSS/JS sandbox.

• Give ’n’ Go – A curated gallery of Dribbble shots reworked as interactive CodePen pens.

• Awwwards – Examples of websites with animation.

• cssanimation.rocks – CSS animated demos.

• ui-animations.tumblr.com – Animations in software user interfaces.

• hoverstat.es – A collection of interesting web sites curated by Animade studio.

• appealing. – A collection of mobile transitions and animations.

Resources for inspiration / Pinterest boards

• Gestures, transitions, animations by Yuri Vetrov.

• Web UI animation by JRMY LFBV.

• UX/UI interaction & Motion design by Matthieu Lerat.

• Animated UX/UI by Julien Tilly.

Resources for inspiration / Processing and other weird but funny stuff

• Bees & bombs – Processing experiments by Dave Whyte.

• PATAKK – Processing experiments by Paolo Zagreb.

• dvdp – Visual chinatown by davidope.

• bigblueboo – 3d and processing experiments by Charlie Deck.

Articles / Processing and other weird but funny stuff

• How fast should your UI animations be? by @valhead.

• Getting started with UI motion design by @Molly Lafferty.

• A Designer’s Guide to Perceived Performance by @Luke Jones.

• How to Use Animation to Improve UX by @Nick Babich.

• How To Use Animations and Motion in Web Design by @PageCloud.

• UI Animation: Eye-Pleasing, Problem-Solving by @Tubik Studio.

• Creating Usability with Motion: The UX in Motion Manifesto by @Issara Willenskomer.

• Jedi Principles of UI Animation by @Adaptive Path.

• Micro Interaction; great experience for user engagement by @Sneha Munot.

• UI Animation. Microinteraction for Macroresult by @Tubik Studio.

• The Principles of UX Choreography by @Rebecca Ussai Henderson.

Software / Video, gif, presentation

• Adobe After Effects – The industry-standard animation and creative compositing app lets you design and deliver professional motion graphics and visual effects for film, TV, video and web:
  • Using After Effects for UI Animation Prototypes (🎥 video).
  • UI Animation tutorials.
  • How to Use After Effects for Web Animation Prototypes (🎥 video).
  • MtMograph summits (🎥 video).
  • After Effects CC Essential Training on Lynda (🎥 video).
  • BodyMovin (⭐32k) – Converter from AE to SVG/canvas.
  • Squall – Converter from AE to iOS.

• Apple Motion – MacOS app for creating and editing motion graphics, titling for video and film production, and 2D/3D compositing for visual effects.

• Adobe Photoshop – Raster graphics editor that can also produce gif UI animations.

• Adobe Flash – Software for creating vector graphics, animations, games, etc.

Software / Visual programming

• Principle For Mac – MacOS app for creating animated, interactive user interfaces.

Helpers / HTML, CSS and JavaScript

• easings.net – Easing functions cheat sheet.

• cubic-bezier.com – Cubic-bezier visual tool.

• csstriggers.com – List of CSS properties that trigger repaint, reflow, or compositing.

Libraries / HTML, CSS and JavaScript

• Web Animation Infographics – Great (but old) infographic with libraries by used technology.

• Bouncy Ball – Comparing animation techniques by showing how to bounce a ball with each one.

Libraries / CSS

• Animate.css – Collections of CSS animations.

• Effeckt.css – Collections of UI animations.

• Bounce.js – Tool for generating CSS keyframe animations from JS easing functions.

• Animations.css - Collection.

• UI buttons – Collection of buttons.

• Hover.css – Hover effects.

• Morf – Transitions with custom easing functions.

• Awesome CSS3 animations – Library of animations.

• All Animation – Set of fun animations to make your project sexier.

• Mantra – Tool for creating keyframes animation.

Libraries / JavaScript

• GreenSock – Ultra high-performance, professional-grade animation for the modern web.

• Impulse – High-performance interactions for mobile web.

• AniJS – Animations by declared data-attributes.

• Snabbt.js – Minimalistic animation library in JavaScript.

• Processing.js – JavaScript library for Processing visual programming language.

• Dynamics.js – JavaScript library to create physics-based animations.

• AnimateTransition – Library for transition of blocks and popups.

• Animate Plus (⭐5.9k) – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.

• Gravitas.js (⭐162) – Super fast physics simulations for JavaScript.

• anime.js - Lightweight JavaScript animation library.

Libraries / SVG

• BonsaiJS – Lightweight graphics library with intuitive graphics API and SVG renderer.

• Vivus.js – Allows you to animate SVGs, giving them the appearance of being drawn.

• Walkway.js – Easy way to animate SVG images consisting of line, path, and polyline elements.

• Transformicons – Animated icons, symbols and buttons using SVG and CSS.

Web animation performance / SVG

• Jankfree.org – Collection of articles and presentations about browser performance.

• High performance animations.

• How to Create Smoother Animations and Transitions in the Browser.

Speeches, presentations, videos / SVG

• Interface Animations (Mark Geyer) – Workshop on BlendConf 2014.

• The future of UX – Animation on the Brain (Rachel Nabors).

• Designing Complex SVG Animations (Sarah Drasner, Trulia).

• Designing with animation (Pasquale D'Silva) (🎥 video).

• Animating Web Experiences (John Allsopp) (🎥 video).

• Putting Your UI in Motion (Val Head) (🎥 video).

• Motion design with CSS (Val Head) (🎥 video).

• Lets move! (Benjamin De Cock, Stripe) (🎥 video).

• Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) (🎥 video).

• Animating the User Experience (Rachel Nabors) (🎥 video).

• Designing meaningful animation (Val Head) (🎥 video).

• Functional Animation (Sarah Drasner) (🎥 video).

Newsletters, podcasts, screencasts / SVG

• The UI Animation Newsletter – Newsletter with resources plus helpful advice on how to make web animation work for you, by @valhead.

• Motion and meaning – Podcast about motion for digital designers by @valhead and Cennydd Bowles.

• All The Right Moves – Animation reviews by @valhead.

Guidelines / SVG

• Android
  • Material design guidelines: Motion

Books / SVG

• Animation in HTML, CSS, and JavaScript.

• Futureproof Web Design Techniques. Interaction Design & Complex Animations by @UXPin.

Resources for inspiration / Pinterest boards

• Motion UI by CodeDesign.

Resources for inspiration / Processing and other weird but funny stuff

• Misha Kvakin – Cinema4D and UI experiments.

Software / Video, gif, presentation

• Apple Keynote – MacOS app for presentations, but also great for high-fidelity animations and prototypes:
  • How To Prototype UI Animations In Keynote.

Software / Visual programming

• Floid – MacOS interaction design tool for any platform & device (Web, iOS, Android).

Speeches, presentations, videos / SVG

• Animations anew - laziness, arrogance and intolerance (Andrey Sitnik) (🇷🇺 Russian language).

Books / SVG

• Designing Interface Animations by @valhead.

How to Share ⭐⭐⭐⭐⭐ / SVG

• Share on Twitter

• Share on Facebook

Libraries / SVG

• SnapSVG — JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
  • How to Manipulate and Animate SVG With Snap.svg