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.

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.
• The Principles of UX Choreography @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 – 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 (🎥 video).
  • MtMograph summits (🎥 video).
  • 30 days of AE (🎥 video).
  • After Effects CC Essential Training on Lynda (🎥 video).
  • BodyMovin – Converter from AE to SVG/canvas.
  • Squall – Converter from AE to iOS.
• Apple 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 – Raster graphics editor that can also produce gif UI animations:
  • 9 Photoshop UI Animation Tutorials.
• Adobe Flash – Software for creating vector graphics, animations, games etc..
• Apple Keynote – MacOS app for presentations, but also great for high-fidelity animations and prototypes:
  • How To Prototype UI Animations In Keynote.

Visual programming

• Quartz Composer – 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.
• Form – App with a node-based visual programming language for prototyping apps by Google.
• Principle For Mac – MacOS app for create animated and interactive user interface designs.
• Floid – MacOS interaction design tool for any platform & device (Web, iOS, Android).

HTML, CSS and JavaScript

• Framer studio – MacOS app for prototyping animations by CoffeeScript programming language.
  • Your first prototype with framer.
• Tumult Hype – MacOS app for creating HTML/CSS sites, banners, presentations etc.
• Adobe Edge Animation – App for creating HTML/CSS sites, banners, presentations etc:
  • Prototyping UI Animation.
• Adobe Experience Design (ex-Project Comet) – App for creating design, prototype and animation of websites and mobile apps (Preview version).
• Google web designer – HTML-based designs and motion graphics.
• Animatron – Web app for creating animations, banners, and infographics.
• Pixate – Prototyping platform.
• SpiritJS – Animation tool for the web (unrealized yet).
• Any HTML/CSS editor, libraries 😉

And obvious your secret weapon – Pen and paper!

Helpers

• easings.net – Easing functions cheat sheet.
• cubic-bezier.com – Cubic-bezier visual tool.
• csstriggers.com – List of CSS properties thats trigger repaint, reflow or compositing.

Libraries

• Web Animation Infographics – Great (but old) infographic with libraries by used technology.
• Bouncy Ball – Comparing animation techniques by showing how to bounce a ball with each one.

CSS

• Animate.css – Collections of CSS animations.
• Effeckt.css – Collections of UI animations.
• Bounce.js – Tool for generate nice CSS keyframes animation from js easing function.
• Animations.css – Collection.
• Magic animations – Collection.
• UI buttons – Collection of buttons.
• Hover.css – Hover effects.
• Morf – Transitions with custom easing functions.
• Awesome CSS3 animations – Library of animations.
• All Animation – Set of fun animations to make your project sexier.
• CSS Animate – Tool for easy and fast creating CSS3 keyframes animation.
• Mantra – Tool for creating keyframes animation.

JavaScript

• GreenSock – Ultra high-performance, professional-grade animation for the modern web.
• Velocity.js – Accelerated JavaScript animation.
• Impulse – High-performance interactions for mobile web.
• AniJS – Animations by declared data-attributes.
• Snabbt.js – Minimalistic animation library in JavaScript.
• Famo.us – High-performance JavaScript library for animations & interfaces.
• Processing.js – JavaScript library for Processing visual programming language.
• Framer.js – Prototyping tool for designing UI, interaction and animation.
• Dynamics.js – JavaScript library to create physics-based animations.
• Mo.js – Motion graphics toolbelt for the web.
• AnimateTransition – Library for transition of blocks and popups.
• Animate Plus – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.
• Gravitas.js – Super fast physics simulations for JavaScript.
• Popmotion – JavaScript motion engine that makes creating engaging user interactions quick and simple.
• anime.js – Lightweight JavaScript animation library.
• useAnimations – micro-animations icon library;

SVG

• SnapSVG — 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
• BonsaiJS – Lightweight graphics library with intuitive graphics API and SVG renderer.
• Vivus.js – Allows you to animate SVGs, giving them the appearence of being drawn.
• Walkway.js – Easy way to animate SVG images consisting of line, path, and polyline elements.
• Transformicons – Animated icons, symbols and buttons using SVG and CSS.

Web animation performance

• Jankfree.org – Collection of articles and presentations about browser performance.
• High performance animations.
• How to Create Smoother Animations and Transitions in the Browser.
• CSS animations and transitions performance: looking inside the browser.

Speeches, presentations, videos

• Interface Animations (Mark Geyer) – Workshop on BlendConf 2014.
• The future of UX – Animation on the Brain (Rachel Nabors).
• Designing Complex SVG Animations (Sarah Drasner, Trulia).
• Designing with animation (Pasquale D’Silva) (🎥 video).
• Animating Web Experiences (John Allsopp) (🎥 video).
• Putting Your UI in Motion (Val Head) (🎥 video).
• Motion design with CSS (Val Head) (🎥 video).
• Lets move! (Benjamin De Cock, Stripe) (🎥 video).
• Animating Your UX (Rachel Nabors) (🎥 video).
• Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) (🎥 video).
• Animating the User Experience (Rachel Nabors) (🎥 video).
• Designing meaningful animation (Val Head) (🎥 video).
• Functional Animation (Sarah Drasner) (🎥 video).
• Animations anew – laziness, arrogance and intolerance (Andrey Sitnik) (🇷🇺 Russian language).

Newsletters, podcasts, screencasts

• The UI Animation 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 – 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 – Podcast about motion for digital designers by @valhead and Cennydd Bowles.
• All The Right Moves – Animation reviews by @valhead.
• UI Movement – best of the week UI animations newsletter.

Guidelines

• Android
  • Material design guidelines: Motion
• MacOS
  • OS X Human Interface Guidelines: Animation
• iOS
  • User Interface Design for iOS 7 Apps (🎥 video)
  • iPhoto for iOS: UI Progression and Animation Design (🎥 video)
• Apple Watch
  • Specifications: Animations
• Windows
  • Guidelines for animations
  • Microsoft web framework: Motion
• IBM
  • IBM Design Language – Animation design guidelines
• SalesForce Lightning

Books

• The Web In Motion: Practical Considerations For Designing With Animation by Smashing Magazine.
• Motion Design for iOS by Mike Rundle.
• Animation in HTML, CSS, and JavaScript.
• Futureproof Web Design Techniques. Interaction Design & Complex Animations by @UXPin.
• CSS animations by @valhead.
• Designing Interface Animations by @valhead (unpublished yet).