Track Motion Ui Design Updates Weekly

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

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 fliptheweb/motion-ui-design · ⭐ 750 · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Oct 19 - Oct 25, 2020

Libraries / JavaScript

• useAnimations - micro-animations icon library;

Sep 24 - Sep 30, 2018

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.

• 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.

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

• appealing. – A collection of mobile transitions and animations.

Newsletters, podcasts, screencasts / SVG

• UI Movement - best of the week UI animations newsletter.

• 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.

Resources for inspiration / Pinterest boards

• Gestures, transitions, animations by Yuri Vetrov.

• Web UI animation by JRMY LFBV.

• UX/UI interaction & Motion design by Matthieu Lerat.

• Animated UX/UI by Julien Tilly.

Resources for inspiration / 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.

Articles / Processing and other weird, but funny stuff

• How fast should your UI animations be? by @valhead.

• Getting started with UI motion design by @Molly Lafferty.

• A Designer’s Guide to Perceived Performance by @Luke Jones.

• How to Use Animation to Improve UX by @Nick Babich.

• How To Use Animations and Motion in Web Design by @PageCloud

• UI Animation: Eye-Pleasing, Problem-Solving by @Tubik Studio.

• UI Motion Design — The Compendium by @Thalion.

• Creating Usability with Motion: The UX in Motion Manifesto by @Issara Willenskomer.

• Jedi Principles of UI Animation @Adaptive Path.

• Micro Interaction; great experience for user engagement @Sneha Munot.

• UI Animation. Microinteraction for Macroresult @Tubik Studio.

• The Principles of UX Choreography @Rebecca Ussai Henderson.

Software / Video, gif, presentation

• 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:
  • Using After Effects for UI Animation Prototypes (🎥 video).
  • UI Animation tutorials.
  • How to Use After Effects for Web Animation Prototypes (🎥 video).
  • MtMograph summits (🎥 video).
  • 30 days of AE (🎥 video).
  • After Effects CC Essential Training on Lynda (🎥 video).
  • BodyMovin (⭐28k) – Converter from AE to SVG/canvas.
  • Squall – Converter from AE to iOS.

• 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.

• Adobe Photoshop – Raster graphics editor that can also produce gif UI animations:
  • 9 Photoshop UI Animation Tutorials.

• Adobe Flash – Software for creating vector graphics, animations, games etc..

Software / Visual programming

• Quartz Composer – MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:
  • The 4 Minute Guide to Quartz Composer (🎥 video).
  • Introducing Origami for QC.
  • Origami – A tool for creating modern UI by Facebook.
  • Avocado – A toolbox for interaction designers.

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

• Principle For Mac – MacOS app for create animated and interactive user interface designs.

Helpers / HTML, CSS and JavaScript

• easings.net – Easing functions cheat sheet.

• cubic-bezier.com – Cubic-bezier visual tool.

• csstriggers.com – List of CSS properties thats trigger repaint, reflow or compositing.

Libraries / HTML, CSS and JavaScript

• 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.

Libraries / CSS

• Animate.css – Collections of CSS animations.

• Effeckt.css – Collections of UI animations.

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

• Animations.css - Collection.

• Magic animations – Collection.

• UI buttons – Collection of buttons.

• Hover.css – Hover effects.

• Morf – Transitions with custom easing functions.

• Awesome CSS3 animations – Library of animations.

• All Animation – Set of fun animations to make your project sexier.

• CSS Animate – Tool for easy and fast creating CSS3 keyframes animation.

• Mantra – Tool for creating keyframes animation.

Libraries / 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 (⭐5.7k) – Prototyping tool for designing UI, interaction and animation.

• Dynamics.js – JavaScript library to create physics-based animations.

• Mo.js (⭐18k) – Motion graphics toolbelt for the web.

• AnimateTransition – Library for transition of blocks and popups.

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

• Gravitas.js (⭐161) – 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.

Libraries / 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 / SVG

• Jankfree.org – Collection of articles and presentations about browser performance.

• High performance animations.

• How to Create Smoother Animations and Transitions in the Browser.

Speeches, presentations, videos / SVG

• Interface Animations (Mark Geyer) – Workshop on BlendConf 2014.

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

• Designing Complex SVG Animations (Sarah Drasner, Trulia).

• Designing with animation (Pasquale D'Silva) (🎥 video).

• Animating Web Experiences (John Allsopp) (🎥 video).

• Putting Your UI in Motion (Val Head) (🎥 video).

• Motion design with CSS (Val Head) (🎥 video).

• Lets move! (Benjamin De Cock, Stripe) (🎥 video).

• Animating Your UX (Rachel Nabors) (🎥 video).

• Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) (🎥 video).

• Animating the User Experience (Rachel Nabors) (🎥 video).

• Designing meaningful animation (Val Head) (🎥 video).

• Functional Animation (Sarah Drasner) (🎥 video).

Guidelines / SVG

• Android
  • Material design guidelines: Motion

Books / SVG

• The Web In Motion: Practical Considerations For Designing With Animation by Smashing Magazine.

• Motion Design for iOS by Mike Rundle.

• Animation in HTML, CSS, and JavaScript.

• Futureproof Web Design Techniques. Interaction Design & Complex Animations by @UXPin.

• CSS animations by @valhead.

Jan 25 - Jan 31, 2016

Guidelines / SVG

• Windows
  • Guidelines for animations
  • Microsoft web framework: Motion

Jan 18 - Jan 24, 2016

Resources for inspiration / Pinterest boards

• Motion UI by CodeDesign.

Resources for inspiration / Processing and other weird, but funny stuff

• Misha Kvakin – Cinema4D and UI experiments.

Software / Video, gif, presentation

• Apple Keynote – MacOS app for presentations, but also great for high-fidelity animations and prototypes:
  • How To Prototype UI Animations In Keynote.

Software / Visual programming

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

Web animation performance / SVG

• CSS animations and transitions performance: looking inside the browser.

Speeches, presentations, videos / SVG

• Animations anew - laziness, arrogance and intolerance (Andrey Sitnik) (🇷🇺 Russian language).

Guidelines / SVG

• iOS
  • User Interface Design for iOS 7 Apps (🎥 video)
  • iPhoto for iOS: UI Progression and Animation Design (🎥 video)

Books / SVG

• Designing Interface Animations by @valhead (unpublished yet).

How to Share ⭐⭐⭐⭐⭐ / SVG

• Share on Twitter

• Share on Facebook

Dec 14 - Dec 20, 2015

Guidelines / SVG

• SalesForce Lightning

Nov 30 - Dec 06, 2015

Guidelines / SVG

• IBM
  • IBM Design Language – Animation design guidelines

May 11 - May 17, 2015

Libraries / 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

Guidelines / SVG

• MacOS
  • OS X Human Interface Guidelines: Animation

• Apple Watch
  • Specifications: Animations