🌈 Awesome Motion UI Design

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:

https://www.adobe.com/products/aftereffects.…

Using After Effects for UI Animation Prototypes

movie_camera: video).

https://www.youtube.com/watch?v=w67z1YhPFKM&…

UI Animation tutorials

https://uxinmotion.net/

How to Use After Effects for Web Animation Prototypes

movie_camera: video).

http://webdesign.tutsplus.com/tutorials/how-…

MtMograph summits

movie_camera: video).

http://mtmograph.com/summits/

30 days of AE

movie_camera: video).

http://schoolofmotion.com/project/30dae_01_w…

After Effects CC Essential Training on Lynda

movie_camera: video).

http://www.lynda.com/After-Effects-tutorials…

Squall

Converter from AE to iOS.

http://www.marcuseckert.com/squall/

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.

https://www.apple.com/sg/final-cut-pro/motio…

Adobe Photoshop

Raster graphics editor that can also produce gif UI animations:

http://www.adobe.com/sea/products/photoshop.…

9 Photoshop UI Animation Tutorials

http://bashooka.com/photoshop/photoshop-ui-a…

Adobe Flash

Software for creating vector graphics, animations, games etc..

http://www.adobe.com/products/flash.html

Apple Keynote

MacOS app for presentations, but also great for high-fidelity animations and prototypes:

https://www.apple.com/ru/mac/keynote/

How To Prototype UI Animations In Keynote

http://www.smashingmagazine.com/2015/08/anim…

Quartz Composer

MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:

https://developer.apple.com/downloads/

The 4 Minute Guide to Quartz Composer

movie_camera: video).

https://vimeo.com/88468610

Introducing Origami for QC

https://medium.com/the-year-of-the-looking-g…

Origami

A tool for creating modern UI by Facebook.

https://facebook.github.io/origami/

Avocado

A toolbox for interaction designers.

https://labs.ideo.com/2014/05/27/avocado/

Form

App with a node-based visual programming language for prototyping apps by Google.

http://www.relativewave.com/form/

Principle

Application for designing animated and interactive user interfaces.

http://principleformac.com/

Floid

MacOS interaction design tool for any platform & device (Web, iOS, Android).

https://floid.io/

Framer studio

MacOS app for prototyping animations by CoffeeScript programming language.

https://framerjs.com/

Your first prototype with framer

https://medium.com/@kennycheny/creating-your…

Tumult Hype

MacOS app for creating HTML/CSS sites, banners, presentations etc.

http://tumult.com/hype/

Adobe Edge Animation

App for creating HTML/CSS sites, banners, presentations etc:

https://creative.adobe.com/products/animate

Prototyping UI Animation

https://medium.com/the-thinkmill/prototyping…

Adobe XD (Experience Design)

First all-in-one cross-platform tool for designing and prototyping websites and mobile apps.

http://www.adobe.com/products/experience-des…

Google web designer

HTML-based designs and motion graphics.

https://www.google.com/webdesigner/

Animatron

Web app for creating animations, banners, and infographics.

http://animatron.com/

Pixate

Prototyping platform.

http://pixate.com/

SpiritJS

Animation tool for the web (unrealized yet).

https://spiritjs.io/

easings.net

Easing functions cheat sheet.

http://easings.net/

cubic-bezier.com

Cubic-bezier visual tool.

http://cubic-bezier.com/

csstriggers.com

List of CSS properties thats trigger repaint, reflow or compositing.

http://csstriggers.com/

Web Animation Infographics

Great (but old) infographic with libraries by used technology.

http://www.awwwards.com/web-animation-infogr…

Bouncy Ball

Comparing animation techniques by showing how to bounce a ball with each one.

https://sparkbox.github.io/bouncy-ball/

Animate.css

Collections of CSS animations.

http://daneden.github.io/animate.css/

Effeckt.css

Collections of UI animations.

http://h5bp.github.io/Effeckt.css/

Bounce.js

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

http://bouncejs.com/

Animations.css

Collection.

http://justinaguilar.com/animations/

Magic animations

Collection.

http://www.minimamente.com/example/magic_ani…

UI buttons

Collection of buttons.

http://uibuttons.com/

Hover.css

Hover effects.

http://ianlunn.github.io/Hover/

Morf

Transitions with custom easing functions.

http://www.joelambert.co.uk/morf/

Awesome CSS3 animations

Library of animations.

http://pavlyukpetr.com/awesome/

All Animation

Set of fun animations to make your project sexier.

http://all-animation.github.io/

CSS Animate

Tool for easy and fast creating CSS3 keyframes animation.

http://cssanimate.com/

Mantra

Tool for creating keyframes animation.

http://jeremyckahn.github.io/mantra/

koenbok/Framer

Framer - Design Everything

5.59K

509

1y 7m

MIT

legomushroom/mojs

The motion graphics toolbelt for the web

16.32K

887

7m

MIT

bendc/animateplus

A+ animation module for the modern web

5.69K

302

2y 4m

MIT

iamralpht/gravitas.js

Super fast physics simulations for JavaScript

154

16

5y 6m

Apache-2.0

GreenSock

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

http://greensock.com/

Velocity.js

Accelerated JavaScript animation.

http://julian.com/research/velocity/

Impulse

High-performance interactions for mobile web.

http://impulse.luster.io/

AniJS

Animations by declared data-attributes.

http://anijs.github.io/

Snabbt.js

Minimalistic animation library in JavaScript.

http://daniel-lundin.github.io/snabbt.js/

Famo.us

High-performance JavaScript library for animations & interfaces.

http://famous.org/

processing.js

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

http://processingjs.org/

Dynamics.js

JavaScript library to create physics-based animations.

http://dynamicsjs.com/

AnimateTransition

Library for transition of blocks and popups.

http://rapid-application-development-js.gith…

Popmotion

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

https://popmotion.io/guides/basics/get-start…

anime.js

Lightweight JavaScript animation library.

http://animejs.com/

useAnimations

https://useanimations.com/

SnapSVG

JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

http://snapsvg.io/

How to Manipulate and Animate SVG With Snap.svg

http://webdesign.tutsplus.com/articles/how-t…

BonsaiJS

Lightweight graphics library with intuitive graphics API and SVG renderer.

https://bonsaijs.org/

Vivus.js

Allows you to animate SVGs, giving them the appearence of being drawn.

http://maxwellito.github.io/vivus/

Walkway.js

Easy way to animate SVG images consisting of line, path, and polyline elements.

http://connoratherton.com/walkway

Transformicons

Animated icons, symbols and buttons using SVG and CSS.

http://www.transformicons.com/

Jankfree.org

Collection of articles and presentations about browser performance.

http://jankfree.org/

High performance animations

http://www.html5rocks.com/en/tutorials/speed…

How to Create Smoother Animations and Transitions in the Browser

http://blog.teamtreehouse.com/create-smoothe…

CSS animations and transitions performance: looking inside the browser

http://blogs.adobe.com/webplatform/2014/03/1…

Interface Animations (Mark Geyer)

Workshop on BlendConf 2014.

http://markgeyer.com/pres/interface-animatio…

The future of UX – Animation on the Brain (Rachel Nabors)

http://www.slideshare.net/CrowChick/animatio…

Designing Complex SVG Animations (Sarah Drasner, Trulia)

http://slides.com/sdrasner/cssdevconf

Designing with animation (Pasquale D'Silva)

movie_camera: video).

https://www.youtube.com/watch?v=TMe0WnkF1Lc&…

Animating Web Experiences (John Allsopp)

movie_camera: video).

https://www.youtube.com/watch?v=66Kf8fMfh1M&…

Putting Your UI in Motion (Val Head)

movie_camera: video).

http://aneventapart.com/news/post/putting-yo…

Motion design with CSS (Val Head)

movie_camera: video).

https://www.youtube.com/watch?v=TjsXqt-UxLo&…

Lets move! (Benjamin De Cock, Stripe)

movie_camera: video).

https://www.youtube.com/watch?v=J6wUmQDQBkw

Animating Your UX (Rachel Nabors)

movie_camera: video).

https://futureinsights-1.wistia.com/medias/k…

Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan)

movie_camera: video).

https://www.youtube.com/watch?v=lf7L8X6ZBu8&…

Animating the User Experience (Rachel Nabors)

movie_camera: video).

https://www.youtube.com/watch?v=bM4qJpg7KhI

Designing meaningful animation (Val Head)

movie_camera: video).

https://vimeo.com/165995133

Functional Animation (Sarah Drasner)

movie_camera: video).

https://www.youtube.com/watch?v=HaD5z2KqcGk&…

Animations anew - laziness, arrogance and intolerance (Andrey Sitnik)

ru: Russian language).

http://ai.github.io/anim2012/

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.

http://valhead.com/newsletter/

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.

http://webanimationweekly.com/

Motion and meaning

Podcast about motion for digital designers by @valhead and Cennydd Bowles.

http://motionandmeaning.io/

All The Right Moves

Animation reviews by @valhead.

https://vimeo.com/channels/alltherightmoves/

UI Movement

Animated interfaces and newsletter.

https://uimovement.com/

Material design guidelines: Motion

https://material.io/design/motion/