Motion UI Design

146 resources10 categoriesView Original

Libraries(36 items)

A

All Animation

– Set of fun animations to make your project sexier.

Libraries
A

AniJS

– Animations by declared data-attributes.

Libraries
A

Animate Plus

– CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.

Libraries
A

Animate.css

– Collections of CSS animations.

Libraries
A

AnimateTransition

– Library for transition of blocks and popups.

Libraries
A

Animations.css

Collection.

Libraries
A

anime.js

Lightweight JavaScript animation library.

Libraries
A

Awesome CSS3 animations

– Library of animations.

Libraries
B

BonsaiJS

– Lightweight graphics library with intuitive graphics API and SVG renderer.

Libraries
B

Bounce.js

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

Libraries
B

Bouncy Ball

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

Libraries
C

CSS Animate

– Tool for easy and fast creating CSS3 keyframes animation.

Libraries
D

Dynamics.js

– JavaScript library to create physics-based animations.

Libraries
E

Effeckt.css

– Collections of UI animations.

Libraries
F

Famo.us

– High-performance JavaScript library for animations & interfaces.

Libraries
F

Framer.js

– Prototyping tool for designing UI, interaction and animation.

Libraries
G

Gravitas.js

– Super fast physics simulations for JavaScript.

Libraries
G

GreenSock

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

Libraries
H

Hover.css

– Hover effects.

Libraries
H

How to Manipulate and Animate SVG With Snap.svg

Libraries
I

Impulse

– High-performance interactions for mobile web.

Libraries
M

Magic animations

– Collection.

Libraries
M

Mantra

– Tool for creating keyframes animation.

Libraries
M

Mo.js

– Motion graphics toolbelt for the web.

Libraries
M

Morf

– Transitions with custom easing functions.

Libraries
P

Popmotion

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

Libraries
P

Processing.js

– JavaScript library for Processing visual programming language.

Libraries
S

Snabbt.js

– Minimalistic animation library in JavaScript.

Libraries
S

SnapSVG

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

Libraries
T

Transformicons

– Animated icons, symbols and buttons using SVG and CSS.

Libraries
U

UI buttons

– Collection of buttons.

Libraries
U

useAnimations

micro-animations icon library;

Libraries
V

Velocity.js

– Accelerated JavaScript animation.

Libraries
V

Vivus.js

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

Libraries
W

Walkway.js

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

Libraries
W

Web Animation Infographics

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

Libraries

Resources for inspiration(24 items)

A

Animated UX/UI

by Julien Tilly.

Resources for inspiration
A

appealing.

– A collection of mobile transitions and animations.

Resources for inspiration
A

Awwwards

– Websites examples of designs with animation.

Resources for inspiration
B

Bees & bombs

– Processing experiments by Dave Whyte.

Resources for inspiration
B

bigblueboo

– 3d and processing experiments by Charlie Deck.

Resources for inspiration
C

capptivate.co

– A collection of awesome mobile interfaces.

Resources for inspiration
C

Codepen

– HTML/CSS/JS sandbox.

Resources for inspiration
C

Codyhouse

– Interactive demos and experiments.

Resources for inspiration
C

cssanimation.rocks

– CSS animated demos.

Resources for inspiration
D

Dribbble

– Animated shots category on Dribbble.

Resources for inspiration
D

dvdp

– Visual chinatown by davidope.

Resources for inspiration
G

Gestures, transitions, animations

by Yuri Vetrov.

Resources for inspiration
G

Give ’n’ Go

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

Resources for inspiration
H

hakim.se

– Experiments by @hakimel.

Resources for inspiration
H

hoverstat.es

– A collection of interesting web sites curated by Animade studio.

Resources for inspiration
M

michaelvillar.com

– experiments by @michaelvillar (Stripe).

Resources for inspiration
M

Misha Kvakin

– Cinema4D and UI experiments.

Resources for inspiration
M

Motion UI

by CodeDesign.

Resources for inspiration
P

PATAKK

– Processing experiments by Paolo Zagreb.

Resources for inspiration
T

Tympanus codrops

– Interactive demos and experiments.

Resources for inspiration
U

UI Movement

Animated interfaces and newsletter.

Resources for inspiration
U

ui-animations.tumblr.com

– Animations in software user interfaces.

Resources for inspiration
U

UX/UI interaction & Motion design

by Matthieu Lerat.

Resources for inspiration
W

Web UI animation

by JRMY LFBV.

Resources for inspiration

Software(33 items)

3

30 days of AE

(:movie_camera: video).

Software
9

9 Photoshop UI Animation Tutorials

.

Software
A

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:

Software
A

Adobe Edge Animation

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

Software
A

Adobe Experience Design (ex-Project Comet)

– App for creating design, prototype and animation of websites and mobile apps (Preview version).

Software
A

Adobe Flash

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

Software
A

Adobe Photoshop

– Raster graphics editor that can also produce gif UI animations:

Software
A

After Effects CC Essential Training on Lynda

(:movie_camera: video).

Software
A

Animatron

– Web app for creating animations, banners, and infographics.

Software
A

Apple Keynote

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

Software
A

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.

Software
A

Avocado

– A toolbox for interaction designers.

Software
B

BodyMovin

– Converter from AE to SVG/canvas.

Software
F

Floid

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

Software
F

Form

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

Software
F

Framer studio

– MacOS app for prototyping animations by CoffeeScript programming language.

Software
G

Google web designer

– HTML-based designs and motion graphics.

Software
H

How To Prototype UI Animations In Keynote

.

Software
H

How to Use After Effects for Web Animation Prot...

(:movie_camera: video).

Software
I

Introducing Origami for QC

.

Software
M

MtMograph summits

(:movie_camera: video).

Software
O

Origami

– A tool for creating modern UI by Facebook.

Software
P

Pixate

– Prototyping platform.

Software
P

Principle For Mac

– MacOS app for create animated and interactive user interface designs.

Software
P

Prototyping UI Animation

.

Software
Q

Quartz Composer

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

Software
S

SpiritJS

– Animation tool for the web (unrealized yet).

Software
S

Squall

– Converter from AE to iOS.

Software
T

The 4 Minute Guide to Quartz Composer

(:movie_camera: video).

Software
T

Tumult Hype

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

Software
U

UI Animation tutorials

.

Software
U

Using After Effects for UI Animation Prototypes

(:movie_camera: video).

Software
Y

Your first prototype with framer

.

Software