Suggest edit — motion-ui-design

Title

Name

Note

---
visibility: public
---

# Motion UI Design

**repo:** [fliptheweb/motion-ui-design](https://github.com/fliptheweb/motion-ui-design)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[css|Css]]

---

# Motion UI Design [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
What is motion design? It's a magic that's alive your interfaces, makes a user feel comfortable with UI changes.
It’s curated collection of resources, software, libraries, videos and articles related to motion UI design, UI animations and transitions.
Feel free to [add something interesting](contributing.md) (todo inside) by pull request!

## Contents
- [Resources for inspiration](#resources-for-inspiration)
	* [Sites](#sites)
	* [Pinterest boards](#pinterest-boards)
	* [Processing](#processing-and-other-weird-but-funny-stuff)
- [Articles](#articles)
- [Software](#software)
	* [Video, gif, presentation](#video-gif-presentation)
	* [Visual programming](#visual-programming)
	* [HTML, CSS and JavaScript](#html-css-and-javascript)
- [Helpers](#helpers)
- [Libraries](#libraries)
	* [CSS](#css)
	* [JavaScript](#javascript)
	* [SVG](#svg)
- [Web animation performance](#web-animation-performance)
- [Speeches, presentations, videos](#speeches-presentations-videos)
- [Newsletters, [podcasts](/@harrisonqian/awesome/wiki/entertainment/podcasts), screencasts](#newsletters-podcasts-screencasts)
- [Guidelines](#guidelines)
- [Books](#books)

## Resources for inspiration
### Sites
* [Tympanus codrops](http://tympanus.net/codrops/) – Interactive demos and experiments.
* [Codyhouse](http://codyhouse.co/library/) – Interactive demos and experiments.
* [Dribbble](http://dribbble.com/shots?list=animated) – Animated shots category on Dribbble.
* [Codepen](http://codepen.io/) – HTML/CSS/JS sandbox.
* [Give ’n’ Go](http://give-n-go.co/) – A curated gallery of Dribbble shots reworked as interactive CodePen pens.
* [capptivate.co](http://capptivate.co/) – A collection of [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) mobile interfaces.
* [Awwwards](http://awwwards.com/websites/animation/) – Websites examples of designs with animation.
* [cssanimation.rocks](http://cssanimation.rocks/) – CSS animated demos.
* [michaelvillar.com](http://michaelvillar.com/motion/) – experiments by @michaelvillar (Stripe).
* [hakim.se](http://hakim.se/) – Experiments by @hakimel.
* [ui-animations.tumblr.com](http://ui-animations.tumblr.com/) – Animations in software user interfaces.
* [hoverstat.es](http://hoverstat.es/) – A collection of interesting web sites curated by Animade studio.
* [appealing.](http://app-ealing.com/) – A collection of mobile transitions and animations.
* [UI Movement](https://uimovement.com/) - Animated interfaces and newsletter.
 
### Pinterest boards
* [Gestures, transitions, animations](http://pinterest.com/jvetrau/gestures-transitions-animations/) by Yuri Vetrov.
* [Web UI animation](http://pinterest.com/JRMYLFBV/web-ui-animation/) by JRMY LFBV.
* [UX/UI interaction & Motion design](http://pinterest.com/matthieuLrt/ux-ui-interaction-motion-design/) by Matthieu Lerat.
* [Animated UX/UI](http://pinterest.com/julient/animated-uxui/) by Julien Tilly.
* [Motion UI](http://pinterest.com/CodeDesignIO/motion-ui/) by CodeDesign.

### Processing and other weird, but funny stuff
* [Bees & bombs](http://beesandbombs.tumblr.com/) – Processing experiments by Dave Whyte.
* [PATAKK](http://patakk.tumblr.com/) – Processing experiments by Paolo Zagreb.
* [dvdp](http://dvdp.tumblr.com/) – Visual chinatown by davidope.
* [bigblueboo](http://bigblueboo.tumblr.com/) – 3d and processing experiments by Charlie Deck.
* [Misha Kvakin](http://misha-kvakin.tumblr.com/) – Cinema4D and UI experiments.

## Articles
* [How fast should your UI animations be?](http://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/) by @valhead.
* [Getting started with UI motion design](https://medium.com/this-also/getting-started-with-ui-motion-design-d82d4a625801) by @Molly Lafferty.
* [A Designer’s Guide to Perceived Performance](https://medium.com/@lukejones/a-designers-guide-to-the-perception-of-performance-fedb4bd102b) by @Luke Jones.
* [How to Use Animation to Improve UX](https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb) by @Nick Babich.
* [How To Use Animations and Motion in Web Design](https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02) by @PageCloud
* [UI Animation: Eye-Pleasing, Problem-Solving](https://uxplanet.org/ui-animation-eye-pleasing-problem-solving-a8b27013f55c) by @Tubik Studio.
* [UI Motion Design — The Compendium](https://blog.prototypr.io/ui-motion-design-the-compendium-d8b478357fa3) by @Thalion.
* [Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) by @Issara Willenskomer.
* [Jedi Principles of UI Animation](https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac) @Adaptive Path.
* [Micro Interaction; great experience for user engagement](https://uxplanet.org/micro-interaction-great-experience-for-user-engagement-b37446bf6306) @Sneha Munot.
* [UI Animation. Microinteraction for Macroresult](https://uxplanet.org/ui-animation-microinteraction-for-macroresult-668cd9e71101) @Tubik Studio.
* [The Principles of UX Choreography](https://medium.freecodecamp.org/the-principles-of-ux-choreography-69c91c2cbc2a) @Rebecca Ussai Henderson.

## Software
List of all possible software that can produce UI animations separated by using technologies and result format (video, prototype, code etc) with links of must-see tutorials and plugins.

### Video, gif, presentation
* [Adobe After Effects](https://www.adobe.com/products/aftereffects.htm) – 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](https://www.youtube.com/watch?v=w67z1YhPFKM&feature=youtu.be) (:movie_camera: video).
  * [UI Animation tutorials](https://uxinmotion.net/).
  * [How to Use After Effects for [Web Animation](/@harrisonqian/awesome/wiki/front-end-development/web-animation) Prototypes](http://webdesign.tutsplus.com/tutorials/how-to-use-after-effects-for-web-animation-prototypes--cms-21451) (:movie_camera: video).
  * [MtMograph summits](http://mtmograph.com/summits/) (:movie_camera: video).
  * [30 days of AE](http://schoolofmotion.com/project/30dae_01_writeon/) (:movie_camera: video).
  * [After Effects CC Essential Training on Lynda](http://www.lynda.com/After-Effects-tutorials/After-Effects-CC-Essential-Training/122431-2.html) (:movie_camera: video).
  * [BodyMovin](https://github.com/bodymovin/bodymovin) – Converter from AE to SVG/[canvas](/@harrisonqian/awesome/wiki/front-end-development/canvas).
  * [Squall](http://www.marcuseckert.com/squall/) – Converter from AE to iOS.
* [Apple Motion](https://www.apple.com/sg/final-cut-pro/motion/) – MacOS app for create and edit motion graphics, titling for video production and film production, and 2D and 3D compositing for visual effects.
* [Adobe Photoshop](http://www.adobe.com/sea/products/photoshop.html) – Raster graphics editor that can also produce gif UI animations:
  * [9 Photoshop UI Animation Tutorials](http://bashooka.com/photoshop/photoshop-ui-animation-tutorials/).
* [Adobe Flash](http://www.adobe.com/products/flash.html) – Software for creating vector graphics, animations, games etc..
* [Apple Keynote](https://www.apple.com/ru/mac/keynote/) – MacOS app for presentations, but also great for high-fidelity animations and prototypes:
	* [How To Prototype UI Animations In Keynote](http://www.smashingmagazine.com/2015/08/animating-in-keynote/).

### Visual programming
* [Quartz Composer](https://developer.apple.com/downloads/) – MacOS app with node-based visual programming language for prototyping MacOS/iOS [apps](/@harrisonqian/awesome/wiki/platforms/apps):
  * [The 4 Minute Guide to Quartz Composer](https://vimeo.com/88468610) (:movie_camera: video).
  * [Introducing Origami for QC](https://medium.com/the-year-of-the-looking-glass/introducing-origami-for-quartz-[composer](/@harrisonqian/awesome/wiki/programming-languages/composer)-f1173d0bd181).
  * [Origami](https://facebook.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/origami/) – A tool for creating modern UI by Facebook.
  * [Avocado](https://labs.ideo.com/2014/05/27/avocado/) – A toolbox for interaction designers.
* [Form](http://www.relativewave.com/form/) – App with a node-based visual programming language for prototyping [apps](/@harrisonqian/awesome/wiki/platforms/apps) by Google.
* [Principle For Mac](http://principleformac.com/) – MacOS app for create animated and interactive user interface designs.
* [Floid](https://floid.io/) – MacOS interaction design tool for any platform & device (Web, iOS, Android).

### HTML, CSS and JavaScript
* [Framer studio](https://framerjs.com/) – MacOS app for prototyping animations by CoffeeScript programming language.
  * [Your first prototype with framer](https://medium.com/@kennycheny/creating-your-first-prototype-with-[framer](/@harrisonqian/awesome/wiki/miscellaneous/framer)-c39221da7668).
* [Tumult Hype](http://tumult.com/hype/) – MacOS app for creating HTML/CSS sites, banners, presentations etc.
* [Adobe Edge Animation](https://creative.adobe.com/products/animate) – App for creating HTML/CSS sites, banners, presentations etc:
  * [Prototyping UI Animation](https://medium.com/the-thinkmill/prototyping-ui-animation-2fe08e3a7932).
* [Adobe Experience Design (ex-Project Comet)](http://www.adobe.com/products/experience-design.html) – App for creating design, prototype and animation of websites and mobile [apps](/@harrisonqian/awesome/wiki/platforms/apps) (Preview version).
* [Google web designer](https://www.google.com/webdesigner/) – HTML-based designs and motion graphics.
* [Animatron](http://animatron.com/) – Web app for creating animations, banners, and infographics.
* [Pixate](http://pixate.com/) – Prototyping platform.
* [SpiritJS](https://spiritjs.io/) – Animation tool for the web (unrealized yet).
* Any HTML/CSS editor, [libraries](#libraries) ;)

And obvious your secret weapon – Pen and paper!

## Helpers
* [easings.net](http://easings.net/) – Easing functions [cheat sheet](/@harrisonqian/awesome/wiki/development-environment/cheat-sheet).
* [cubic-bezier.com](http://cubic-bezier.com/) – Cubic-bezier visual tool.
* [csstriggers.com](http://csstriggers.com/) – List of CSS properties thats trigger repaint, reflow or compositing.

## Libraries
* [Web Animation Infographics](http://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-[javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript)-and-css3-plus-performance-[tips](/@harrisonqian/awesome/wiki/programming-languages/tips).html) – Great (but old) infographic with libraries by used technology.
* [Bouncy Ball](https://sparkbox.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/bouncy-ball/) – Comparing animation techniques by showing how to bounce a ball with each one.

### CSS
* [Animate.css](http://daneden.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/animate.css/) – Collections of CSS animations.
* [Effeckt.css](http://h5bp.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/Effeckt.css/) – Collections of UI animations.
* [Bounce.js](http://bouncejs.com/) – Tool for generate nice CSS keyframes animation from js easing function.
* [Animations.css](http://justinaguilar.com/animations/) - Collection.
* [Magic animations](http://www.minimamente.com/example/magic_animations/) – Collection.
* [UI buttons](http://uibuttons.com/) – Collection of buttons.
* [Hover.css](http://ianlunn.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/Hover/) – Hover effects.
* [Morf](http://www.joelambert.co.uk/morf/) – Transitions with custom easing functions.
* [Awesome CSS3 animations](http://pavlyukpetr.com/awesome/) – Library of animations.
* [All Animation](http://all-animation.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/) – Set of fun animations to make your project sexier.
* [CSS Animate](http://cssanimate.com/) – Tool for easy and fast creating CSS3 keyframes animation.
* [Mantra](http://jeremyckahn.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/mantra/) – Tool for creating keyframes animation.

### JavaScript
* [GreenSock](http://greensock.com/) – Ultra high-performance, professional-grade animation for the modern web.
* [Velocity.js](http://julian.com/research/velocity/) – Accelerated [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) animation.
* [Impulse](http://impulse.luster.io/) – High-performance interactions for mobile web.
* [AniJS](http://anijs.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/) – Animations by declared data-attributes.
* [Snabbt.js](http://daniel-lundin.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/snabbt.js/) – Minimalistic animation library in [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript).
* [Famo.us](http://famous.org/) – High-performance [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library for animations & interfaces.
* [Processing.js](http://processingjs.org/) – [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library for Processing visual programming language.
* [Framer.js](https://github.com/koenbok/Framer) – Prototyping tool for designing UI, interaction and animation.
* [Dynamics.js](http://dynamicsjs.com/) – [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library to create physics-based animations.
* [Mo.js](https://github.com/legomushroom/mojs) – Motion graphics toolbelt for the web.
* [AnimateTransition](http://rapid-application-development-js.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/AnimateTransition/) – Library for transition of blocks and popups.
* [Animate Plus](https://github.com/bendc/animateplus) – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.
* [Gravitas.js](https://github.com/iamralpht/gravitas.js) – Super fast physics simulations for [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript).
* [Popmotion](https://popmotion.io/guides/basics/get-started/) – [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) motion engine that makes creating engaging user interactions quick and simple.
* [anime.js](http://animejs.com/) - Lightweight [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) animation library.
* [useAnimations](https://useanimations.com/) - micro-animations icon library;

### SVG
* [SnapSVG](http://snapsvg.io/) — [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library makes working with your SVG assets as easy as [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) makes working with the DOM.
	* [How to Manipulate and Animate SVG With Snap.svg](http://webdesign.tutsplus.com/articles/how-to-manipulate-and-animate-svg-with-snapsvg--cms-21323)
* [BonsaiJS](https://bonsaijs.org/) – Lightweight graphics library with intuitive graphics API and SVG renderer.
* [Vivus.js](http://maxwellito.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/vivus/) – Allows you to animate SVGs, giving them the appearence of being drawn.
* [Walkway.js](http://connoratherton.com/walkway) – Easy way to animate SVG images consisting of line, path, and polyline elements.
* [Transformicons](http://www.transformicons.com/) – Animated [icons](/@harrisonqian/awesome/wiki/media/icons), symbols and buttons using SVG and CSS.

## Web animation performance
* [Jankfree.org](http://jankfree.org/) – Collection of articles and presentations about browser performance.
* [High performance animations](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/).
* [How to Create Smoother Animations and Transitions in the Browser](http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser).
* [CSS animations and transitions performance: looking inside the browser](http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/).

## Speeches, presentations, videos
* [Interface Animations (Mark Geyer)](http://markgeyer.com/pres/interface-animations/) – Workshop on BlendConf 2014.
* [The future of UX – Animation on the Brain (Rachel Nabors)](http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726).
* [Designing Complex SVG Animations (Sarah Drasner, Trulia)](http://slides.com/sdrasner/cssdevconf).
* [Designing with animation (Pasquale D'Silva)](https://www.youtube.com/watch?v=TMe0WnkF1Lc&feature=youtu.be&list=UURx1y52pfeMwbuer9Vh2u-A&[html5](/@harrisonqian/awesome/wiki/front-end-development/html5)=1) (:movie_camera: video).
* [Animating Web Experiences (John Allsopp)](https://www.youtube.com/watch?v=66Kf8fMfh1M&list=UURx1y52pfeMwbuer9Vh2u-A&index=47) (:movie_camera: video).
* [Putting Your UI in Motion (Val Head)](http://aneventapart.com/news/post/putting-your-ui-in-motion-with-css-by-val-head-an-event-apart-video) (:movie_camera: video).
* [Motion design with CSS (Val Head)](https://www.youtube.com/watch?v=TjsXqt-UxLo&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA) (:movie_camera: video).
* [Lets [move](/@harrisonqian/awesome/wiki/programming-languages/move)! (Benjamin De Cock, Stripe)](https://www.youtube.com/watch?v=J6wUmQDQBkw) (:movie_camera: video).
* [Animating Your UX (Rachel Nabors)](https://futureinsights-1.wistia.com/medias/k62k980uo7) (:movie_camera: video).
* [Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan)](https://www.youtube.com/watch?v=lf7L8X6ZBu8&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA) (:movie_camera: video).
* [Animating the User Experience (Rachel Nabors)](https://www.youtube.com/watch?v=bM4qJpg7KhI) (:movie_camera: video).
* [Designing meaningful animation (Val Head)](https://vimeo.com/165995133) (:movie_camera: video).
* [Functional Animation (Sarah Drasner)](https://www.youtube.com/watch?v=HaD5z2KqcGk&feature=youtu.be) (:movie_camera: video).
* [Animations anew - laziness, arrogance and intolerance (Andrey Sitnik)](http://ai.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/anim2012/) (:ru: Russian language).

## Newsletters, podcasts, screencasts
* [The UI Animation Newsletter](http://valhead.com/newsletter/) – newsletter with resources plus helpful advice on how to make [web animation](/@harrisonqian/awesome/wiki/front-end-development/web-animation) work for you coming straight to your inbox each month by @valhead.
* [Web Animation Weekly](http://webanimationweekly.com/) – newsletter with articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of [web animation](/@harrisonqian/awesome/wiki/front-end-development/web-animation) and motion design by Rachel Nabors.
* [Motion and meaning](http://motionandmeaning.io/) – Podcast about motion for digital designers by @valhead and Cennydd Bowles.
* [All The Right Moves](https://vimeo.com/channels/alltherightmoves/) – Animation reviews by @valhead.
* [UI Movement](https://uimovement.com/) - best of the week UI animations newsletter.

## Guidelines
* [Android](/@harrisonqian/awesome/wiki/platforms/android)
  * [Material design guidelines: Motion](https://material.io/design/motion/)
* MacOS
  * [OS X Human Interface Guidelines: Animation](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Animation.html#//apple_ref/doc/uid/20000957-CH11-SW1)
* iOS
  * [User Interface Design for iOS 7 Apps](https://developer.apple.com/tech-talks/videos/?id=2) (:movie_camera: video)
  * [iPhoto for iOS: UI Progression and Animation Design](https://developer.apple.com/videos/wwdc/2012/?id=243) (:movie_camera: video)
* Apple Watch
  * [Specifications: Animations](https://developer.apple.com/watch/human-interface-guidelines/specifications/#animations)
* [Windows](/@harrisonqian/awesome/wiki/platforms/windows)
	* [Guidelines for animations](https://msdn.microsoft.com/en-us/library/windows/apps/dn611854.aspx)
	* [Microsoft web framework: Motion](http://getmwf.com/styles/motion.html)
* IBM
	* [IBM Design Language – Animation design guidelines](http://www.ibm.com/design/language/framework/animation/introduction)
* [SalesForce Lightning](https://www.lightningdesignsystem.com/design/motion/)

## Books
* [The Web In Motion: Practical Considerations For Designing With Animation](https://shop.smashingmagazine.com/products/the-web-in-motion-practical-considerations-for-designing-with-animation) by Smashing Magazine.
* [Motion Design for iOS](https://designthencode.com/) by Mike Rundle.
* [Animation in HTML, CSS, and JavaScript](http://www.kirupa.com/book/animation_in_html_css_and_javascript.htm).
* [Futureproof [Web Design](/@harrisonqian/awesome/wiki/miscellaneous/web-design) Techniques. Interaction Design & Complex Animations](http://www.uxpin.com/curated-interaction-design-animations.html) by @UXPin.
* [CSS animations](http://cssanimationspocketguide.com/) by @valhead.
* [Designing Interface Animations](http://rosenfeldmedia.com/books/designing-interface-animations/) by @valhead (unpublished yet).

## How to Share :star::star::star::star::star:
* <a href="https://twitter.com/intent/tweet?text=https://[github](/@harrisonqian/awesome/wiki/development-environment/github).com/fliptheweb/motion-ui-design%20Motion%20UI%20Design%20collection" target="_blank">Share on Twitter</a>
* <a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https://github.com/fliptheweb/motion-ui-design&p[images][0]=&p[title]=Motion%20UI%20Design%20Collection&p[summary]=" target="_blank">Share on Facebook</a>

## License

[![CC0](https://upload.wikimedia.org/wikipedia/commons/6/69/CC0_button.svg)](https://creativecommons.org/publicdomain/zero/1.0/)

**Collected with :heart: by Artur Kornakov and [these awesome guys](https://github.com/fliptheweb/motion-ui-design/graphs/contributors)**