Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fliptheweb/motion-ui-design

Resources for inspiration, lists of software, libraries and other stuff related to Motion UI design, animations and transitions.
https://github.com/fliptheweb/motion-ui-design

List: motion-ui-design

animation awesome awesome-list list motion-design ui

Last synced: 4 months ago
JSON representation

Resources for inspiration, lists of software, libraries and other stuff related to Motion UI design, animations and transitions.

Awesome Lists containing this project

README 

        
# 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, 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



[![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)**