motion-ui-design
Resources for inspiration, lists of software, libraries and other stuff related to Motion UI design, animations and transitions.
816 stars
38 watching
76 forks
last commit: about 1 year ago
Linked from 4 awesome lists
animationawesomeawesome-listlistmotion-designui
Motion UI Design / 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 | ||
| 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 | ||
Motion UI Design / Resources for inspiration / 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 | ||
Motion UI Design / Resources for inspiration / 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 | ||
Motion UI Design / 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 | @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 | ||
Motion UI Design / Software / 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: | ||
Motion UI Design / Software / Video, gif, presentation / Adobe After Effects | |||
| 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 | 30,391 | 2 months ago | – Converter from AE to SVG/canvas |
| Squall | – Converter from AE to iOS | ||
Motion UI Design / Software / Video, gif, presentation | |||
| 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: | ||
Motion UI Design / Software / Video, gif, presentation / Adobe Photoshop | |||
| 9 Photoshop UI Animation Tutorials | |||
Motion UI Design / Software / Video, gif, presentation | |||
| 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: | ||
Motion UI Design / Software / Video, gif, presentation / Apple Keynote | |||
| How To Prototype UI Animations In Keynote | |||
Motion UI Design / Software / Visual programming | |||
| Quartz Composer | – MacOS app with node-based visual programming language for prototyping MacOS/iOS apps: | ||
Motion UI Design / Software / Visual programming / Quartz Composer | |||
| The 4 Minute Guide to Quartz Composer | ( video) | ||
| Introducing Origami for QC | |||
| Origami | – A tool for creating modern UI by Facebook | ||
| Avocado | – A toolbox for interaction designers | ||
Motion UI Design / Software / Visual programming | |||
| 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) | ||
Motion UI Design / Software / HTML, CSS and JavaScript | |||
| Framer studio | – MacOS app for prototyping animations by CoffeeScript programming language | ||
Motion UI Design / Software / HTML, CSS and JavaScript / Framer studio | |||
| Your first prototype with framer | |||
Motion UI Design / Software / HTML, CSS and JavaScript | |||
| Tumult Hype | – MacOS app for creating HTML/CSS sites, banners, presentations etc | ||
| Adobe Edge Animation | – App for creating HTML/CSS sites, banners, presentations etc: | ||
Motion UI Design / Software / HTML, CSS and JavaScript / Adobe Edge Animation | |||
| Prototyping UI Animation | |||
Motion UI Design / Software / HTML, CSS and JavaScript | |||
| 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) | ||
Motion UI Design / 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 | ||
Motion UI Design / 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 | ||
Motion UI Design / Libraries / 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 | ||
Motion UI Design / Libraries / 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 | 5,839 | over 5 years ago | – Prototyping tool for designing UI, interaction and animation |
| Dynamics.js | – JavaScript library to create physics-based animations | ||
| Mo.js | 18,398 | 4 months ago | – Motion graphics toolbelt for the web |
| AnimateTransition | – Library for transition of blocks and popups | ||
| Animate Plus | 5,955 | about 6 years ago | – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile |
| Gravitas.js | 163 | over 9 years ago | – 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-animations icon library; | ||
Motion UI Design / Libraries / SVG | |||
| SnapSVG | — JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM | ||
Motion UI Design / Libraries / SVG / SnapSVG | |||
| How to Manipulate and Animate SVG With Snap.svg | |||
Motion UI Design / Libraries / 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 | ||
Motion UI Design / 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 | |||
Motion UI Design / 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) | ||
Motion UI Design / 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 | ||
Motion UI Design / Guidelines / Android | |||
| Material design guidelines: Motion | |||
Motion UI Design / Guidelines / MacOS | |||
| OS X Human Interface Guidelines: Animation | |||
Motion UI Design / Guidelines / iOS | |||
| User Interface Design for iOS 7 Apps | ( video) | ||
| iPhoto for iOS: UI Progression and Animation Design | ( video) | ||
Motion UI Design / Guidelines / Apple Watch | |||
| Specifications: Animations | |||
Motion UI Design / Guidelines / Windows | |||
| Guidelines for animations | |||
| Microsoft web framework: Motion | |||
Motion UI Design / Guidelines / IBM | |||
| IBM Design Language – Animation design guidelines | |||
Motion UI Design / Guidelines | |||
| SalesForce Lightning | |||
Motion UI Design / Books | |||
| 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) | ||
Motion UI Design / How to Share | |||
| Share on Twitter | |||
| Share on Facebook | |||
sindresorhus/awesome
jnv/lists
ttt30ga/awesome-product-design
0ex/more-awesome