Learn Animation

Make your website pop with eye-catching animations. Read these free animation tutorials to master CSS and JavaScript techniques for creating successful animations.

All Animation tutorials:

Filters

Animation

10 Examples of Animation on CodePen You Can Learn From

Tutorial • Beginner

CodePen is a great place to find inspiration and see what crazy UI experiments others are coming up with. As well as this, it’s also a useful place to find...

Donovan Hutchinson • 27 Feb 2017
Prototyping

A Web Designer’s Introduction to Adobe Animate CC

Tutorial • Intermediate

What’s better than being static? Being in motion, my good friends. Motion is on the rise for the web, from simple interface interactions, to more complex...

Dennis Gaebel • 21 Feb 2017
Animation

New Short Course: A Visual Guide to CSS Animation

Tutorial • Beginner

It’s now possible to create awesome animation effects using pure CSS, without a scrap of JavaScript in sight. In our new short course, A Visual Guide to CSS...

Andrew Blackman • 31 Jan 2017
Animation

How to Make Magic, Animated Tooltips With CSS

Tutorial • Intermediate

Tooltips are a great way to enhance a UI when your users need some extra context for that fancy icon, or when they want some reassurance for clicking a...

Jase Smith • 24 Jan 2017
Animation

3 Courses to Help You Master Scrolling Animation

Tutorial • Beginner

Scrolling animation can be a great way to provide more interest for your users and to make your websites more interactive. The idea is that, as a user...

Andrew Blackman • 14 Dec 2016
Animation

Get Hands-On With These 8 Practical Project-Based Courses

Tutorial • Beginner

In this article, I'm going to give you a quick introduction to eight courses that are designed to let you learn by building things yourselves—with...

Andrew Blackman • 9 Nov 2016
Animation

Getting Started With ScrollMagic

Tutorial • Beginner

In our new short course, Getting Started With ScrollMagic, you'll learn how to use the ScrollMagic library, which simplifies the process of creating...

Andrew Blackman • 13 Oct 2016
Animation

9 Popular Courses on CSS Animation

Tutorial • Beginner

Are you up to date with all the latest techniques of web animation using CSS, JavaScript, easing, SVGs, and special frameworks like the GreenSock Animation...

Andrew Blackman • 8 Sep 2016
SVG

SVG Brilliance: 10 Inspiring Examples From Around the Web

Tutorial • Beginner

Scalable vector graphics (SVG) need no introduction for web designers. They scale up and down crisply, play nicely with animations, they’re a powerful format...

Dennis Gaebel • 16 Aug 2016
Animation

New Course: Practical Animation With GSAP

Tutorial • Beginner

If you want to learn more about creating beautiful web animations, our new course is for you. In 3 GreenSock Projects: Practical Animation With GSAP, you'll...

Andrew Blackman • 15 Jul 2016
SVG

Get Started With Web Animation

Tutorial • Beginner

In this article, I’ll run through the steps involved in learning animation for the web, from what it’s all about, though straightforward transitions, more...

Ian Yates • 14 Jul 2016
Animation

How to Animate a Coffee-Drinking Sprite With ScrollMagic

Tutorial • Intermediate

Creating scroll-initiated motion can be immensely gratifying. We’ll be diving into a particular effect seen on the Casper Mattress website (created by Jonnie...

Dennis Gaebel • 14 Jun 2016