Your first time on this page? Allow me to give some explanations.
Awesome Motion UI Design
Resources for inspiration, lists of software, libraries and other stuff related to Motion UI design, animations and transitions.
Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.
Thank you fliptheweb & contributors
View Topic on GitHub:
fliptheweb/motion-ui-design
Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.
Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.
Sites
Great collection of design techniques for modern web developmers and designers.
Central repository of user submitted code concepts/snippets. Great for experiments.
A curated gallery of Dribbble shots reworked as interactive CodePen pens.
Pinterest boards
Processing and other weird, but funny stuff
Articles
by @Molly Lafferty.
by @Luke Jones.
by @PageCloud
by @Tubik Studio.
by @Issara Willenskomer.
Sneha Munot.
Tubik Studio.
Rebecca Ussai Henderson.
Video, gif, presentation
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
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:
movie_camera: video).
movie_camera: video).
movie_camera: video).
MacOS app for create and edit motion graphics, titling for video production and film production, and 2D and 3D compositing for visual effects.
Raster graphics editor that can also produce gif UI animations:
Software for creating vector graphics, animations, games etc..
MacOS app for presentations, but also great for high-fidelity animations and prototypes:
Visual programming
MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:
App with a node-based visual programming language for prototyping apps by Google.
Application for designing animated and interactive user interfaces.
MacOS interaction design tool for any platform & device (Web, iOS, Android).
HTML, CSS and JavaScript
MacOS app for prototyping animations by CoffeeScript programming language.
MacOS app for creating HTML/CSS sites, banners, presentations etc.
App for creating HTML/CSS sites, banners, presentations etc:
First all-in-one cross-platform tool for designing and prototyping websites and mobile apps.
Helpers
List of CSS properties thats trigger repaint, reflow or compositing.
Libraries
Great (but old) infographic with libraries by used technology.
Comparing animation techniques by showing how to bounce a ball with each one.
CSS
Tool for generate nice CSS keyframes animation from js easing function.
JavaScript
Framer - Design Everything
The motion graphics toolbelt for the web
A+ animation module for the modern web
Super fast physics simulations for JavaScript
Ultra high-performance, professional-grade animation for the modern web.
Processing.js makes your data visualizations work using web standards and without any plug-ins.
Library for transition of blocks and popups.
JavaScript motion engine that makes creating engaging user interactions quick and simple.
SVG
JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
Lightweight graphics library with intuitive graphics API and SVG renderer.
Allows you to animate SVGs, giving them the appearence of being drawn.
Easy way to animate SVG images consisting of line, path, and polyline elements.
Animated icons, symbols and buttons using SVG and CSS.
Web animation performance
Collection of articles and presentations about browser performance.
Speeches, presentations, videos
Workshop on BlendConf 2014.
movie_camera: video).
movie_camera: video).
movie_camera: video).
movie_camera: video).
movie_camera: video).
movie_camera: video).
movie_camera: video).
movie_camera: video).
movie_camera: video).
Newsletters, podcasts, screencasts
newsletter with resources plus helpful advice on how to make web animation work for you coming straight to your inbox each month by @valhead.
newsletter with articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design by Rachel Nabors.
Podcast about motion for digital designers by @valhead and Cennydd Bowles.
Guidelines
movie_camera: video)
movie_camera: video)
Books
by Smashing Magazine.
by @UXPin.
by @valhead (unpublished yet).
License
Resources for inspiration, lists of software, libraries and other stuff related to Motion UI design, animations and transitions.