Skip to content

saywassup/motion-ui-resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 

Repository files navigation

Motion UI Design Awesome

What is motion design? It's a magic that's alive your interfaces, makes a user feel comfortable with UI changes. It’s curated collection of resources, software, libraries, videos and articles related to motion UI design, UI animations and transitions. Feel free to add something interesting (todo inside) by pull request!

Contents

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.
  • UYI – Great collection of moving 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.
  • sixux.com – Vines with awesome transitions and animations.
  • hoverstat.es – A collection of interesting web sites curated by Animade studio.
  • appealing. – A collection of mobile transitions and animations.
  • UI Interactions – UI interactions for your inspiration, every day.
  • Uplabs - Daily Web resources for designers
  • Muzli - All the design inspiration you need.
  • UI Movement - Animated interfaces and newsletter.

Pinterest boards

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.

Courses

Articles

Software

List of all possible software that can produce UI animations separated by using technologies and result format (video, prototype, code etc) with links of must-see tutorials and plugins.

Video, gif, presentation

Visual programming

HTML, CSS and JavaScript

And obvious your secret weapon – Pen and paper!

Helpers

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.

CSS

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 – Prototyping tool for designing UI, interaction and animation.
  • Dynamics.js – JavaScript library to create physics-based animations.
  • Mo.js – Motion graphics toolbelt for the web.
  • AnimateTransition – Library for transition of blocks and popups.
  • Animate Plus – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.
  • Gravitas.js – 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.

SVG

  • SnapSVG — JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. * How to Manipulate and Animate SVG With Snap.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.

Web animation performance

Speeches, presentations, videos

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.

Guidelines

Books

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published