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.
- Resources for inspiration
- Web animation performance
- Speeches, presentations, videos
- Newsletters, podcasts, screencasts
Resources for inspiration
- 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.
- 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.
- 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.
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:
- 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:
- Quartz Composer – MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:
- 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).
- Framer studio – MacOS app for prototyping animations by CoffeeScript programming language.
- Tumult Hype – MacOS app for creating HTML/CSS sites, banners, presentations etc.
- Adobe Edge Animation – App for creating HTML/CSS sites, banners, presentations etc:
- 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!
- 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.
- 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.
- 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.
- GreenSock – Ultra high-performance, professional-grade animation for the modern web.
- Impulse – High-performance interactions for mobile web.
- AniJS – Animations by declared data-attributes.
- Framer.js – Prototyping tool for designing UI, interaction and animation.
- 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.
- useAnimations – micro-animations icon library;
- 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.
- Apple Watch
- SalesForce Lightning
- The Web In Motion: Practical Considerations For Designing With Animation by Smashing Magazine.
- Motion Design for iOS by Mike Rundle.
- Futureproof Web Design Techniques. Interaction Design & Complex Animations by @UXPin.
- CSS animations by @valhead.
- Designing Interface Animations by @valhead (unpublished yet).