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:Using After Effects for UI Animation Prototypes ( video).UI Animation tutorials.How to Use After Effects for Web Animation Prototypes (…

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:9 Photoshop UI Animation Tutorials.

 Software for creating vector graphics, animations, games etc..

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

 MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:The 4 Minute Guide to Quartz Composer ( video).Introducing Origami for QC.Origami – A tool for creating modern UI by Facebook.Avocado – 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.Your first prototype with framer.

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

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

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.

Prototyping tool for designing UI, interaction and animation.

JavaScript library to create physics-based animations.

 Motion graphics toolbelt for the web.

 Library for transition of blocks and popups.

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

 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.How to Manipulate and Animate SVG With Snap.svg

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.

AndroidMaterial design guidelines: Motion

MacOSOS X Human Interface Guidelines: Animation

iOSUser Interface Design for iOS 7 Apps ( video)iPhoto for iOS: UI Progression and Animation Design ( video)

Apple WatchSpecifications: Animations

WindowsGuidelines for animationsMicrosoft web framework: Motion

by Smashing Magazine.

by Mike Rundle.

.

by @UXPin.

by @valhead.

by @valhead (unpublished yet).