Web Animation

• The State of SVG Animation (Adobe Blog)
• website design - How do you animate SVG for the web? (Graphic Design Stack Exchange)
• CSS Versus JavaScript Animations - Web Fundamentals ( Google Developers)

CSS

• Using CSS animations - CSS (MDN)
• 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. (daneden/animate.css)

Easing

• Timing Functions (aka Easing Functions) in CSS3 (KIRUPA)

Morphing

• Simple Path Examples (codepen.io)

SVG

transform - SVG

• How to Scale SVG (CSS-Tricks)
• Fills and Strokes - SVG (MDN)
• The SVG path Syntax: An Illustrated Guide (CSS-Tricks)
• Using SVG (CSS-Tricks)
• A Practical Guide to SVGs on the web (svgontheweb.com)
• Introduction - SVG (MDN)
• Paths - SVG (MDN)
• SVG Tutorial (www.petercollingridge.co.uk)

Tutorials

• SVG for Absolute Beginners
• Intermediate SVG
• SVG Tutorial

JavaScript Libraries

Snap.svg

Snap.svg

• API Reference

Easing

• Snap.SVG Easing Algorithms (codepen.io)

Adobe Animate

• Creating a vector animation for the web in a post-Flash world — This Little Duck (thislittleduck.com)

Tutorials

• Getting Started With Snap.svg (www.i-programmer.info)
• How to get started with Snap.svg - Developer Drive (www.developerdrive.com)
• Animated SVG Icons with Snap.svg (tympanus.net)
• An Introdution to Snap.svg (www.sitepoint.com)
• SVG Metamorphosis – Design + Sketch – Medium
  https://medium.com/sketch-app-sources/svg-metamorphosis-a9d6ca14fce2
• How to Manipulate and Animate SVG With Snap.svg (webdesign.tutsplus.com)
• Elastic SVG Elements (Codrops)
• The Illusion Of Life: An SVG Animation Case Study (Smashing Magazine)
• Creating SVG animations with Snap.svg (blog.10pines.com)
• Snap.svg Animation Tutorial for Beginners (GoInkscape!)
• SVG Animations Using CSS and Snap.svg (davidwalsh.name)
• SVG Morphing (the easy way and the hard way) – codeburst (codeburst.io)
• Animate SVG icons with CSS and Snap (CodyHouse)
• How To Animate Element Along SVG Path (icanbecreative)
• The missing snap.svg function (www.michaeltempest.com)
• Snap.svg Tutorial (kucdinteractive.com)
• SVG Vector graphics with Snap.svg by Eugenio Keno Leon on CodePen (codepen.io)

Demos

• Snap.svg Tutorial
• Snap.svg scale and rotate around centre - JSFiddle
• Path morph loop with Snap.svg (codepen.io)
• SVG Morphing Butterfly using Snap.svg & Sketch (codepen.io)
• Animated SVG Path (codepen.io)
• Basic Snap.svg JS Animation (codepen.io)

SnapFoo

SnapFoo

Anime.js

animejs.com

Motion

• mo · js - Motion Graphics For The Web (mojs.io)

Velocity

Velocity.js

GSAP

GSAP, the standard for JavaScript HTML5 animation
https://greensock.com/

Easing

• Ease Visualizer for GSAP HTML5 Animation
  (GreenSock)

Tutorials

• How to Create an Interactive Animated SVG Drum Kit (Codrops)

D3

D3.js - Data-Driven Documents
https://d3js.org/

seen.js

seen.js
http://seenjs.io/

vivus

• vivus.js - svg animation (maxwellito.github.io)

paper.js

• Paper.js — About (paperjs.org)

SVG.js

http://svgjs.com/

SMIL

Synchronized Multimedia Integration Language

• SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features (CSS-Tricks)

Web Animations API

• Using the Web Animations API - Web APIs (MDN)

• web-animations/web-animations-js: JavaScript implementation of the Web Animations API (github.com)