Resources for inspiration / Sites
- Codyhouse – Interactive demos and experiments.
- Dribbble – Animated shots category on Dribbble.
- Give ’n’ Go – A curated gallery of Dribbble shots reworked as interactive CodePen pens.
- Awwwards – Websites examples of designs with animation.
- 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.
Resources for inspiration / Pinterest boards
Resources for inspiration / Processing and other weird, but funny stuff
- 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
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:
- 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:
- 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:
- 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
- csstriggers.com – List of CSS properties thats trigger repaint, reflow or compositing.
Libraries / HTML, CSS and JavaScript
- Bouncy Ball – Comparing animation techniques by showing how to bounce a ball with each one.
Libraries / CSS
- Bounce.js – Tool for generate nice CSS keyframes animation from js easing function.
- Morf – Transitions with custom easing functions.
- 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.
- 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.
- Dynamics.js – JavaScript library to create physics-based animations.
- Animate Plus (⭐5.9k) – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.
- 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.
Speeches, presentations, videos / SVG
Guidelines / SVG
Books / SVG
]]>