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.

Read less

All content

Courses

Tutorials

All Animation content:

Animation

Completing Our Draggable Off-Canvas Menu with GreenSock

Tutorial • Advanced

In the first part of this Draggable journey, we discussed how to include scripts, investigated the ThrowPropsPlugin, including the requirements to jump start...

Dennis Gaebel • 3 Nov 2015
Material Design

Timeline-Based Animation for the Web with Hype 3

Tutorial • Beginner

Hype 3, by Tumult, is an OS X application for creating HTML5 animations. If you ever used Flash’s iconic timeline tools, Hype 3’s interface will seem very...

Ian Yates • 12 Oct 2015
Animation

Silky Smooth Web Animation with Velocity.js

Tutorial • Intermediate

Animation, when thoughtfully applied, can improve website interfaces and, ultimately, the user experience of a website. In this tutorial, we are going to...

Thoriq Firdaus • 13 Jul 2015
Animation

TimelineMax: Getting a Handle on Bézier Tweening

Tutorial • Intermediate

Plugins for GSAP are great when you need advanced capabilities. The BezierPlugin I’ll be explaining in this tutorial helps animate virtually any property (or...

Dennis Gaebel • 21 May 2015
Animation

Introducing ScrollMagic 2.0

Tutorial • Intermediate

If you’re desperate to generate beautiful scroll animations in your next project, then look no further. ScrollMagic is a JavaScript library to help you...

Dennis Gaebel • 19 May 2015
SVG

Sign on the Dotted Line: Finishing Your Animation With Waypoints

Tutorial • Intermediate

In the previous tutorial we animated an SVG signature using CSS. It’s a great effect, making it appear as though the words are being written right there on...

Ian Yates • 4 May 2015
SVG

Sign on the Dotted Line: Animating Your Own SVG Signature

Tutorial • Intermediate

Animating the stroke of an SVG is perfect for simulating handwriting. Over the course of two tutorials we’re going to use CSS animation to make a signature...

Ian Yates • 1 May 2015
Animation

TimelineMax: Controlling Playback With addPause()

Tutorial • Intermediate

In this tutorial we’ll learn how to control animations, on demand, using a method called addPause(). Ready? Set? … slight pause … Let’s go!

Dennis Gaebel • 22 Apr 2015
Animation

Adding Appeal to Your Animations on the Web

Tutorial • Intermediate

How to add appeal to your designs by combining multiple animations, delays and timing functions.

Donovan Hutchinson • 30 Mar 2015
Animation

TimelineMax: An Introduction to Tweening

Tutorial • Intermediate

In the olden days of animation tweening was a term used to describe a frame by frame sequence, or what’s sometimes referred to as “in-betweens.” It’s that...

Dennis Gaebel • 16 Mar 2015
Animation

TimelineMax: Understanding the Mechanics

Tutorial • Beginner

Mechanics is defined as an area concerned with the behavior of objects subjected to forces or displacements, and the subsequent effects of those objects on...

Dennis Gaebel • 20 Feb 2015
Animation

TimelineMax: A Primer

Tutorial • Intermediate

What is TimelineMax? What makes it different from other Green Sock Animation Platform (GSAP) libraries? Why would I need TimelineMax over TimelineLite? How...

Dennis Gaebel • 17 Feb 2015

Related Categories

JavaScript for Designers

UX/UI