motion-ui-design

– Interactive demos and experiments

– Interactive demos and experiments

– Animated shots category on Dribbble

– HTML/CSS/JS sandbox

– A curated gallery of Dribbble shots reworked as interactive CodePen pens

– A collection of awesome mobile interfaces

– Websites examples of designs with animation

– CSS animated demos

– experiments by @michaelvillar (Stripe)

– Experiments by @hakimel

– Animations in software user interfaces

– A collection of interesting web sites curated by Animade studio

– A collection of mobile transitions and animations

Animated interfaces and newsletter

by Yuri Vetrov

by JRMY LFBV

by Matthieu Lerat

by Julien Tilly

by CodeDesign

– Processing experiments by Dave Whyte

– Processing experiments by Paolo Zagreb

– Visual chinatown by davidope

– 3d and processing experiments by Charlie Deck

– Cinema4D and UI experiments

by @valhead

by @Molly Lafferty

by @Luke Jones

by @Nick Babich

by @PageCloud

by @Tubik Studio

by @Thalion

by @Issara Willenskomer

@Adaptive Path

@Sneha Munot

@Tubik Studio

@Rebecca Ussai Henderson

– 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:

( video)

( video)

( video)

( video)

( video)

BodyMovin

– Converter from AE to SVG/canvas

– Converter from AE to iOS

– MacOS app for create and edit motion graphics, titling for video production and film production, and 2D and 3D compositing for visual effects

– Raster graphics editor that can also produce gif UI animations:

– Software for creating vector graphics, animations, games etc

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

– MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:

( video)

– A tool for creating modern UI by Facebook

– A toolbox for interaction designers

– App with a node-based visual programming language for prototyping apps by Google

– MacOS app for create animated and interactive user interface designs

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

– MacOS app for prototyping animations by CoffeeScript programming language

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

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

– App for creating design, prototype and animation of websites and mobile apps (Preview version)

– HTML-based designs and motion graphics

– Web app for creating animations, banners, and infographics

– Prototyping platform

– Animation tool for the web (unrealized yet)

– Easing functions cheat sheet

– Cubic-bezier visual tool

– List of CSS properties thats trigger repaint, reflow or compositing

– Great (but old) infographic with libraries by used technology

– Comparing animation techniques by showing how to bounce a ball with each one

– Collections of CSS animations

– Collections of UI animations

– Tool for generate nice CSS keyframes animation from js easing function

Collection

– Collection

– Collection of buttons

– Hover effects

– Transitions with custom easing functions

– Library of animations

– Set of fun animations to make your project sexier

– Tool for easy and fast creating CSS3 keyframes animation

– Tool for creating keyframes animation

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

– Accelerated JavaScript animation

– High-performance interactions for mobile web

– Animations by declared data-attributes

– Minimalistic animation library in JavaScript

– High-performance JavaScript library for animations & interfaces

– JavaScript library for Processing visual programming language

Framer.js

– Prototyping tool for designing UI, interaction and animation

– JavaScript library to create physics-based animations

Mo.js

– Motion graphics toolbelt for the web

– 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

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

Lightweight JavaScript animation library

micro-animations icon library;

— JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM

– Lightweight graphics library with intuitive graphics API and SVG renderer

– Allows you to animate SVGs, giving them the appearence of being drawn

– Easy way to animate SVG images consisting of line, path, and polyline elements

– Animated icons, symbols and buttons using SVG and CSS

– Collection of articles and presentations about browser performance

– Workshop on BlendConf 2014

( video)

( video)

( video)

( video)

( video)

( video)

( video)

( video)

( video)

( video)

( Russian language)

– newsletter with resources plus helpful advice on how to make web animation work for you coming straight to your inbox each month by @valhead

– newsletter with articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design by Rachel Nabors

– Podcast about motion for digital designers by @valhead and Cennydd Bowles

– Animation reviews by @valhead

best of the week UI animations newsletter

( video)

( video)

by Smashing Magazine

by Mike Rundle

by @UXPin

by @valhead

by @valhead (unpublished yet)