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 by pull request!
- Resources for inspiration
- Software
- Helpers
- Libraries
- Web animation performance
- Speeches, presentations, videos
- Newsletters, podcasts, screencasts
- Guidelines
- Books
- 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.
- 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.
- Bees & bombs – processing experiments by Dave Whyte;
- PATAKK – processing experiments by Paolo Zagreb;
- dvdp – visual chinatown by davidope;
- Misha Kvakin – Cinema4D and UI experiments.
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.
- 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:
- 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:
- 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).
- 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.
Great (but old) infographic with libraries by used technology http://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html
- 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 – a collection of buttons;
- Hover.css – hover effects;
- Morf – transitions with custom easing functions.
- 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 – js 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 – a 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.
- SnapSVG — js library makes working with your SVG assets as easy as jQuery makes working with the DOM;
- BonsaiJS – lightweight graphics library with an intuitive graphics API and an SVG renderer;
- Vivus.js – allows you to animate SVGs, giving them the appearence of being drawn;
- Walkway.js – an easy way to animate SVG images consisting of line, path, and polyline elements.
- 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.
- 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);
- Animations anew - laziness, arrogance and intolerance (Andrey Sitnik) (:ru: Russian language).
- 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 – a podcast about motion for digital designers by @valhead and Cennydd Bowles;
- All The Right Moves – animation reviews by @valhead.
- Android
- MacOS
- iOS
- User Interface Design for iOS 7 Apps (:movie_camera: video)
- iPhoto for iOS: UI Progression and Animation Design (:movie_camera: video)
- Apple Watch
- Windows
- IBM
- SalesForce Lightning
- 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).
Collected with ❤️ by Artur Kornakov