User Experience on mobile might not be great yet, but I'm working on it.

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.

Last Update: Dec. 3, 2020, 9:08 a.m.

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.

Interactive demos and experiments.

Animated shots category on Dribbble.

Central repository of user submitted code concepts/snippets. Great for experiments.

A curated gallery of Dribbble shots reworked as interactive CodePen pens.

A collection of awesome mobile interfaces.

Websites examples of designs with animation.

experiments by @michaelvillar (Stripe).

Experiments by @hakimel.

Animations in software user interfaces.

A collection of interesting web sites curated by Animade studio.

A collection of mobile transitions and animations.

Animated interfaces and newsletter.

Pinterest boards

Processing and other weird, but funny stuff

Processing experiments by Dave Whyte.

Processing experiments by Paolo Zagreb.

Visual chinatown by davidope.

3d and processing experiments by Charlie Deck.

Cinema4D and UI experiments.

Articles

Video, gif, presentation

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

22.64K
2.24K
19d
MIT

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:

Converter from AE to iOS.

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:

A tool for creating modern UI by Facebook.

A toolbox for interaction designers.

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.

HTML-based designs and motion graphics.

Web app for creating animations, banners, and infographics.

Prototyping platform.

Animation tool for the web (unrealized yet).

Helpers

Easing functions cheat sheet.

Cubic-bezier visual tool.

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

Collections of CSS animations.

Collections of UI animations.

Tool for generate nice CSS keyframes animation from js easing function.

Collection of buttons.

Transitions with custom easing functions.

Set of fun animations to make your project sexier.

Tool for easy and fast creating CSS3 keyframes animation.

Tool for creating keyframes animation.

JavaScript

Framer - Design Everything

5.59K
509
1y 7m
MIT

The motion graphics toolbelt for the web

16.32K
887
7m
MIT

A+ animation module for the modern web

5.69K
302
2y 4m
MIT

Super fast physics simulations for JavaScript

154
16
5y 6m
Apache-2.0

Ultra high-performance, professional-grade animation for the modern web.

Accelerated JavaScript animation.

High-performance interactions for mobile web.

Animations by declared data-attributes.

Minimalistic animation library in JavaScript.

High-performance JavaScript library for animations & interfaces.

Processing.js makes your data visualizations work using web standards and without any plug-ins.

JavaScript library to create physics-based animations.

Library for transition of blocks and popups.

JavaScript motion engine that makes creating engaging user interactions quick and simple.

Lightweight JavaScript animation library.

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

Speeches, presentations, videos

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.

Animated interfaces and newsletter.

Guidelines

Books

License

Resources for inspiration, lists of software, libraries and other stuff related to Motion UI design, animations and transitions.

655
63
52d
n/a