December 16th, 2016
With the holidays and the end of the year coming up, you might just find yourself with some spare time to learn something new. If you’re looking for some tutorials to help you up your web animation skills, here are a few places to start.
If you want to dig even deeper, Sarah Drasner and I are running a number of Web Animation Workshops next year too.
SVG animation tutorials
Introduction to SVG animation
A great place to get started animating SVG with CSS or JS.
SVG line animations for the uninitiated
This tutorial includes some handy tips on preparing your SVG file and browser support.
SVG beyond shapes complete tutorial series
A whole series of tutorials on animating SVG with d3!
CSS Animation tutorials
How to create a CSS glitch effect
Recreating a neat glitch animation effect with CSS.
Cheap parallax with JS & CSS Transforms
A simple approach to creating parallax motion tied to mouse movement.
A few different approaches to staggering your animations for a more professional look.
GSAP + SVG for power users tutorial series
A three-part series that shows you how to use some of the features of the Greensock animation library:
Part 1 – Motion along a path
Part 2 – Complex responsive animation
Part 3 – Stagger cycles and colour animation
Introduction to Mo.js
Mo.js is still in beta, but there are some fun features to check out.
3D and three.js tutorials
Animating a basic 3D scene with three.js
This tutorial covers some basic concepts of WebGL with Three.js that will be helpful no matter what you want to build with them.
This list originally appeared in a tutorials feature issue of the UI Animation Newsletter. Subscribe to get web animation news and tips straight to your inbox each week!