Motion UI Design

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 (todo inside) by pull request!

Contents

• Resources for inspiration
  • Sites
  • Pinterest boards
  • Processing
• Articles
• Software
  • Video, gif, presentation
  • Visual programming
  • HTML, CSS and JavaScript
• Helpers
• Libraries
  • CSS
  • JavaScript
  • SVG
• Web animation performance
• Speeches, presentations, videos
• Newsletters, podcasts, screencasts
• Guidelines
• Books

Resources for inspiration

Sites

• Tympanus codrops – Interactive demos and experiments.
• Codyhouse – Interactive demos and experiments.
• Dribbble – Animated shots category on Dribbble.
• Codepen – HTML/CSS/JS sandbox.
• Give ’n’ Go – A curated gallery of Dribbble shots reworked as interactive CodePen pens.
• capptivate.co – A collection of awesome mobile interfaces.
• Awwwards – Websites examples of designs with animation.
• cssanimation.rocks – CSS animated demos.
• michaelvillar.com – experiments by @michaelvillar (Stripe).
• hakim.se – Experiments by @hakimel.
• ui-animations.tumblr.com – Animations in software user interfaces.
• hoverstat.es – A collection of interesting web sites curated by Animade studio.
• appealing. – A collection of mobile transitions and animations.
• UI Movement - Animated interfaces and newsletter.  

Pinterest boards

• Gestures, transitions, animations by Yuri Vetrov.
• Web UI animation by JRMY LFBV.
• UX/UI interaction & Motion design by Matthieu Lerat.
• Animated UX/UI by Julien Tilly.
• Motion UI by CodeDesign.

Processing and other weird, but funny stuff

• Bees & bombs – Processing experiments by Dave Whyte.
• PATAKK – Processing experiments by Paolo Zagreb.
• dvdp – Visual chinatown by davidope.
• bigblueboo – 3d and processing experiments by Charlie Deck.
• Misha Kvakin – Cinema4D and UI experiments.

Articles

• How fast should your UI animations be? by @valhead.
• Getting started with UI motion design by @Molly Lafferty.
• A Designer’s Guide to Perceived Performance by @Luke Jones.
• How to Use Animation to Improve UX by @Nick Babich.
• How To Use Animations and Motion in Web Design by @PageCloud
• UI Animation: Eye-Pleasing, Problem-Solving by @Tubik Studio.
• UI Motion Design — The Compendium by @Thalion.
• Creating Usability with Motion: The UX in Motion Manifesto by @Issara Willenskomer.
• Jedi Principles of UI Animation @Adaptive Path.
• Micro Interaction; great experience for user engagement @Sneha Munot.
• UI Animation. Microinteraction for Macroresult @Tubik Studio.