Awesome Motion UI Design

A curated collection of resources and projects focused on Motion UI Design.

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.
• Awwwards – Examples of websites with animation.
• cssanimation.rocks – CSS animated demos.
• 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.

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 by @Adaptive Path.
• Micro Interaction; great experience for user engagement by @Sneha Munot.
• UI Animation. Microinteraction for Macroresult by @Tubik Studio.
• The Principles of UX Choreography by @Rebecca Ussai Henderson.

Software

Software for producing UI animations, grouped by technology and output format (video, prototype, code, etc.) — with links to 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).
  • 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 creating and editing motion graphics, titling for video and film production, and 2D/3D compositing for visual effects.
• Adobe Photoshop – Raster graphics editor that can also produce gif UI animations.
• 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 a node-based visual programming language for prototyping MacOS/iOS apps (discontinued by Apple):
  • The 4 Minute Guide to Quartz Composer (:movie_camera: video).
  • Introducing Origami for QC.
  • Origami Studio – A tool for creating modern UI by Facebook.
• Principle For Mac – MacOS app for creating animated, interactive user interfaces.
• Floid – MacOS interaction design tool for any platform & device (Web, iOS, Android).

HTML, CSS and JavaScript

• Framer – Tool for prototyping animations and interactive UI.
  • Your first prototype with framer.
• Tumult Hype – MacOS app for creating HTML/CSS sites, banners, presentations, etc.
• Adobe Animate – App for creating HTML/CSS sites, banners, presentations, etc.:
  • Prototyping UI Animation.
• Google web designer – HTML-based designs and motion graphics.
• Animatron – Web app for creating animations, banners, and infographics.
• SpiritJS – Animation tool for the web (still in development).
• Any HTML/CSS editor, libraries ;)

And, of course, 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 that 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 generating CSS keyframe animations from JS easing functions.
• 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.
• 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.
• Processing.js – JavaScript library for Processing visual programming language.
• 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-animation 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 appearance 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.

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) (: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).
• 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).

Newsletters, podcasts, screencasts

• The UI Animation Newsletter – Newsletter with resources plus helpful advice on how to make web animation work for you, by @valhead.
• Motion and meaning – Podcast about motion for digital designers by @valhead and Cennydd Bowles.
• All The Right Moves – Animation reviews by @valhead.

Guidelines

• Android
  • Material design guidelines: Motion
• MacOS
  • Human Interface Guidelines: Motion
• Windows
  • Motion in Windows apps

Books

• Animation in HTML, CSS, and JavaScript.
• Futureproof Web Design Techniques. Interaction Design & Complex Animations by @UXPin.
• Designing Interface Animations by @valhead.

How to Share :star::star::star::star::star:

• Share on Twitter
• Share on Facebook

License

Collected with :heart: by Artur Kornakov and these awesome guys