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.
  1. How to Build a JavaScript Popup Modal From Scratch

    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!

  2. Creating Animations With MotionLayout for Android

    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.

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

    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.

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

    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.

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

    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.

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

    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...

  7. 15 Inspiring Examples of CSS Animation on CodePen

    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...

  8. How to Make a Beating Heart Animation for St. Valentine’s Day With 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.

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

    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...

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

    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,...

  11. Best Free Canvas Libraries in JavaScript

    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.

  12. Best Free and Open-Source JavaScript Animation Libraries

    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.