It’s curated collection of resources, software, libraries, videos and articles related to motion UI design & web UI animations and transitions. Feel free to add something by pull request!
- Resources for inspiration
- Software
- Helpers
- Libraries
- Web animation performance
- Speeches, presentations, videos
- Guidelines
- Books
- Tympanus codrops
- Codyhouse
- Dribbble
- Codepen
- give-n-go.co
- capptivate.co
- hoverstat.es
- useyourinterface.com
- Awwwards
- cssanimation.rocks
- michaelvillar.com
- lab.hakim.se
- ui-animations.tumblr.com
- sixux.com
- UI buttons
- Gestures, transitions, animations by Yuri Vetrov
- Web UI animation
- UX/UI interaction & Motion design by Matthieu Lerat
- Animated UX/UI by Julien Tilly
- Motion UI by CodeDesign
- http://beesandbombs.tumblr.com/
- http://patakk.tumblr.com/
- http://dvdp.tumblr.com/
- http://misha-kvakin.tumblr.com/
- Quartz Composer
- Form
- Principle For Mac
- Floid
- Framer studio
- Tumult Hype
- Adobe Edge Animation
- Project Comet (unrealized yet)
- Google web designer
- Animatron
- Pixate
- 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;
- 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.
- 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
- http://markgeyer.com/pres/interface-animations/
- http://markgeyer.com/pres/the-art-of-ui-animations/
- http://ai.github.io/anim2012/ (RU)
- http://profyclub.ru/docs/188 (RU)
- http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726
- Designing Complex SVG Animations (Sarah Drasner, Trulia)
- All The Right Moves (screencast)
- Designing with animation (video)
- Animating Web Experiences (video)
- Putting Your UI in Motion (Val Head) (video)
- Lets move! (Benjamin De Cock, Stripe) (video)
- Animating Your UX (Rachel Nabors) (video)
- Motion and meaning – A podcast about motion for digital designers brought to you by Val Head and Cennydd Bowles.
- Android
- MacOS
- iOS
- 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