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
CSS animation for beginners
A short concise intro to CSS animation. For a more in-depth look at CSS animation, check out my CSS Animation course on lynda.com.
How to create a CSS glitch effect
Recreating a neat glitch animation effect with CSS.
Transition Effect with CSS Masks
A fun experimental use of masks for transitions. Also see Clipping and Masking in CSS & SVG and Clipping and Masking in CSS for more on clipping and masks.
JavaScript animation tutorials
Cheap parallax with JS & CSS Transforms
A simple approach to creating parallax motion tied to mouse movement.
Staggering animations
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
Beginning 3D with WebGL tutorial series:
Part 1 – The scene
Part 2 – Geometry
Part 3 – Materials
Part 4 – Animation
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!
