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

How to Build a JavaScript Popup Modal From Scratch

Tutorial • Intermediate

In this tutorial we’ll learn how to build flexible popup modals (windows) with HTML, CSS, and JavaScript–without using a framework like Bootstrap!

George Martsoukos • 6 Sep 2023
Animation

Creating Animations With MotionLayout for Android

Tutorial • Intermediate

This tutorial will teach you how to animate different widgets in your activity using the MotionLayout subclass in Android.

Nitish Kumar • 26 May 2023
Animation

How to Build a Pure CSS Loading Animation (With Keyframes)

Tutorial • Beginner

Animations are a great way to make a website more interesting. In this tutorial, we’ll be building a loading animation on a webpage using CSS keyframes.

Jemima Abu • 3 Feb 2023
Animation

How to Create Animated Snow on a Website (with CSS and JavaScript)

Tutorial • Beginner

In this tutorial, we’re going to implement an animated snow effect on a webpage using CSS and vanilla JavaScript, just in time for the holiday season.

Jemima Abu • 8 Dec 2022
Animation

JavaScript-Based Animations Using Anime.js, Part 2: Parameters

Tutorial • Intermediate

You can use parameters to control the animation of multiple target elements at once, changing things like the sequence in which the animations are played.

Monty Shokeen • 27 Oct 2022
Animation

Best CSS Animations and Effects on CodeCanyon 2023 (Paid + Free)

Tutorial • Beginner

There is a lot of browser support for using different transitions and keyframe animations in your projects now. You no longer have to rely on JavaScript...

Eric Dye • 26 Sep 2022
Animation

15 Inspiring Examples of CSS Animation on CodePen

Tutorial • Beginner

CodePen is unquestionably the go-to place to show off what we can do with our web creations. Here’s a list of some of the great stuff people have been...

Donovan Hutchinson • 6 Apr 2022
SVG

How to Make a Beating Heart Animation for St. Valentine’s Day With SVG

Tutorial • Intermediate

Let’s get into the spirit of St. Valentine’s day, getting all pink and smooshy in the process, and code ourselves a simple beating heart animation with SVG.

Ian Yates • 3 Feb 2022
Animation

How to Build a Cursor Hover Effect With JavaScript Mouse Events and GSAP

Tutorial • Intermediate

In this tutorial, we’ll work with two JavaScript mouse events and GSAP to build a creative effect that you’ve probably seen somewhere on a website: a custom...

George Martsoukos • 8 Nov 2021
Animation

How to Build a Draggable Image Gallery and a Custom Lightbox With GSAP

Tutorial • Intermediate

Let's build a responsive JavaScript image gallery with a draggable featured image/main slide plus a custom lightbox. To make the target element draggable,...

George Martsoukos • 16 Sep 2021
Animation

Best Free Canvas Libraries in JavaScript

Tutorial • Beginner

Let's look at some of the best canvas libraries in JavaScript. These can be used for visualizing data or creating simple animations and particle systems.

Monty Shokeen • 24 Jun 2021
Animation

Best Free and Open-Source JavaScript Animation Libraries

Tutorial • Beginner

I'll show you eight of the best free and open-source JavaScript animation libraries that you can use in your projects today.

Monty Shokeen • 17 Jun 2021

Related Categories

JavaScript for Designers

UX/UI