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
• Courses
• 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.
• UYI – Great collection of moving 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.
• sixux.com – Vines with awesome transitions and animations.
• hoverstat.es – A collection of interesting web sites curated by Animade studio.
• appealing. – A collection of mobile transitions and animations.
• UI Interactions – UI interactions for your inspiration, every day.
• Uplabs - Daily Web resources for designers
• Muzli - All the design inspiration you need.
• 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.

Courses

• Design meaningful experiences through an animation system by Louis Ansa (lang en-US)
• Using motion design to animate with purpose and create delightful experiences by Louis Paquet (lang en-US)
• UX in motion (lang en-US)
• UX motion design (lang pt-BR)

Articles

• Microsoft's Fluent 2 Motion Design by Microsoft
• The 10 Principles of Motion Design by Adam Crawford
• Executing UX Animations: Duration and Motion Characteristics by Page Laubheimer
• The Role of Animation and Motion in UX by Page Laubheimer
• Animation principles in UI by Adam Fry-Pierce & Brittany Layton
• The Designer’s Guide to Adding Animation in UX Design by Jolina Landicho
• Adding value to your design by understanding motion and its tools by Yifan Ding
• Animation Handbook - DesignBetter by InVision by Ryan McLeod
• Ultimate Guide to UX Animation by @Erica Sunarjo
• 5 steps for including motion design in your system by @calebarclay
• Motion design in digital products: a white paper by @Issara Willenskomer
• How to analyze usability from motion by @Issara Willenskomer
• 8 things to consider when creating UI animations by @Hike One / prototypr.io
• Motion Design Doesn’t Have to be Hard by @Jonas Naimark
• Disney’s motion principles in designing interface animations by @Ruthi
• Animation principles for UX and UI designers by @Vernon Joyce
• The ultimate guide to proper use of animation in UX by @Taras Skytskyi
• Interaction Design & Animations by @UXPin
• Micro-interactions: why, when and how to use them to improve the user experience by @UX Collective
• Dear Ueno: how do you create UX with delightful animations? by @UENO
• Microinterações: qualidade e exclusividade para a sua interface by @UI Lab
• Sculpting Software Animation by @Pasquale D’Silva
• Animation in UI Design: From Concept to Reality by @Tubik Studio
• Animated Interactions. Motion on Purpose by @Tubik Studio
• Transitional Interfaces by @Pasquale D’Silva
• Functionality vs Emotions in Mobile Interface Animation by @Cuberto
• How You Can Improve UX with Microinteractions. Part II by @Sergey Gladkiy
• How You Can Improve UX with Microinteractions. Part I by @Sergey Gladkiy
• UX Design: How to Use Animations in Mobile Applications by @Tubik Studio
• 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 (:movie_camera: video).
  • UI Animation tutorials.
  • How to Use After Effects for Web Animation Prototypes (:movie_camera: video).
  • MtMograph summits (:movie_camera: video).
  • 30 days of AE (:movie_camera: video).
  • After Effects CC Essential Training on Lynda (:movie_camera: 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 (:movie_camera: 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.

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

• Improving Website Performance with CSS Containment by Manuel Rego | CSSconf EU 2019 - By @regocas (:movie_camera: video)
• Martin Splitt: A visual guide of rendering performance - By @g33konaut (:movie_camera: video)
• Web Performance Mini Series: Animations - By @aerotwist (:movie_camera: video)
• Animating Layouts with the FLIP Technique - By @davidkpiano
• Aerowist - Flip your animations - By @aerotwist
• Browser Rendering Optimization - Udacity course – Course to learn building 60 FPS Web Apps.
• 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

• Designing Fluid Interfaces (Apple) (:movie_camera: video).
• Designing With Motion (Val Head) (:movie_camera: video).
• Purpose and Style: Using Motion with Meaning in Interfaces (Val Head) (:movie_camera: video).
• Talk: How to Build Meaningful Animations with Louis Ansa, Art Director at makemepulse (:movie_camera: video).
• Talk: Practical Tips for Great UI Animation with Pablo Stanley, Design Lead at InVision Studio Platform (:movie_camera: video).
• 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) (:movie_camera: video).
• Animating Web Experiences (John Allsopp) (:movie_camera: video).
• Putting Your UI in Motion (Val Head) (:movie_camera: video).
• Motion design with CSS (Val Head) (:movie_camera: video).
• Lets move! (Benjamin De Cock, Stripe) (:movie_camera: video).
• Animating Your UX (Rachel Nabors) (:movie_camera: video).
• Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) (:movie_camera: video).
• Animating the User Experience (Rachel Nabors) (:movie_camera: video).
• Designing meaningful animation (Val Head) (:movie_camera: video).
• Functional Animation (Sarah Drasner) (:movie_camera: video).
• Animations anew - laziness, arrogance and intolerance (Andrey Sitnik) (:ru: Russian language).
• [Getting from A to B - The Art of Interpolation] (Marcus Eckert) (https://vimeo.com/111574737) (:movie_camera: video).

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 (:movie_camera: video)
  • iPhoto for iOS: UI Progression and Animation Design (:movie_camera: video)
• Apple Watch
  • Specifications: Animations
• Windows _ Guidelines for animations _ Microsoft web framework: Motion
• IBM * IBM Design Language – Animation design guidelines
• SalesForce Lightning

Books

• Microinteractions by Dan Saffer.
• 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).