# Motion UI Design [](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, 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 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 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.
* [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:
* [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-f1173d0bd181).
* [Origami](https://facebook.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 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-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 (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.
* [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-and-css3-plus-performance-tips.html) – Great (but old) infographic with libraries by used technology.
* [Bouncy Ball](https://sparkbox.github.io/bouncy-ball/) – Comparing animation techniques by showing how to bounce a ball with each one.
### CSS
* [Animate.css](http://daneden.github.io/animate.css/) – Collections of CSS animations.
* [Effeckt.css](http://h5bp.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.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.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.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 animation.
* [Impulse](http://impulse.luster.io/) – High-performance interactions for mobile web.
* [AniJS](http://anijs.github.io/) – Animations by declared data-attributes.
* [Snabbt.js](http://daniel-lundin.github.io/snabbt.js/) – Minimalistic animation library in JavaScript.
* [Famo.us](http://famous.org/) – High-performance JavaScript library for animations & interfaces.
* [Processing.js](http://processingjs.org/) – 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 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.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.
* [Popmotion](https://popmotion.io/guides/basics/get-started/) – JavaScript motion engine that makes creating engaging user interactions quick and simple.
* [anime.js](http://animejs.com/) - Lightweight JavaScript animation library.
* [useAnimations](https://useanimations.com/) - micro-animations icon library;
### SVG
* [SnapSVG](http://snapsvg.io/) — 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](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.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, 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=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! (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.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 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 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
* [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
* [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 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:
* Share on Twitter
* Share on Facebook
## License
[](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)**