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.

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.

Motion UI

by CodeDesign.

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.

Misha Kvakin

Cinema4D and UI experiments.

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.

UI Motion Design — The Compendium

by @Thalion.

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.

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

(:movie_camera: video).

UI Animation tutorials

.

How to Use After Effects for Web Animation Prototypes

(:movie_camera: video).

MtMograph summits

(:movie_camera: video).

After Effects CC Essential Training on Lynda

(:movie_camera: video).

BodyMovin

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.

Apple Keynote

MacOS app for presentations, but also great for high-fidelity animations and prototypes:

How To Prototype UI Animations In Keynote

.

The 4 Minute Guide to Quartz Composer

(:movie_camera: video).

Introducing Origami for QC

.

Origami Studio

A tool for creating modern UI by Facebook.

Principle For Mac

MacOS app for creating animated, interactive user interfaces.

Floid

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

Framer

Tool for prototyping animations and interactive UI.

Your first prototype with framer

.

Tumult Hype

MacOS app for creating HTML/CSS sites, banners, presentations, etc.

Adobe Animate

App for creating HTML/CSS sites, banners, presentations, etc.:

Prototyping UI Animation

.

Google web designer

HTML-based designs and motion graphics.

Animatron

Web app for creating animations, banners, and infographics.

SpiritJS

Animation tool for the web (still in development).

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.

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.

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.

Magic animations

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.

GreenSock

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

Velocity.js

Accelerated JavaScript animation.

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.

Mo.js

Motion graphics toolbelt for the web.

AnimateTransition

Library for transition of blocks and popups.

Animate Plus

CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.

Gravitas.js

Super fast physics simulations for JavaScript.

Popmotion

JavaScript motion engine that makes creating engaging user interactions quick and simple.

anime.js

Lightweight JavaScript animation library.

useAnimations

Micro-animation icon library.

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

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.

Jankfree.org

Collection of articles and presentations about browser performance.

High performance animations

.

How to Create Smoother Animations and Transitions in the Browser

.

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)

(:movie_camera: video).

Animating Web Experiences (John Allsopp)

(:movie_camera: video).

Putting Your UI in Motion (Val Head)

(:movie_camera: video).

Motion design with CSS (Val Head)

(:movie_camera: video).

Lets move! (Benjamin De Cock, Stripe)

(:movie_camera: video).

Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan)

(:movie_camera: video).

Animating the User Experience (Rachel Nabors)

(:movie_camera: video).

Designing meaningful animation (Val Head)

(:movie_camera: video).

Functional Animation (Sarah Drasner)

(:movie_camera: video).

Animations anew - laziness, arrogance and intolerance (Andrey Sitnik)

(:ru: Russian language).

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.

Material design guidelines: Motion

Human Interface Guidelines: Motion

Motion in Windows apps

Animation in HTML, CSS, and JavaScript

.

Futureproof Web Design Techniques. Interaction Design & Complex Animations

by @UXPin.

Designing Interface Animations

by @valhead.