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 moreRead less
All content
Courses
Tutorials

All Animation tutorials:

  1. Create horizontal scroll animations with GSAP & ScrollTrigger

    Create horizontal scroll animations with GSAP & ScrollTrigger

    Tutorial • Intermediate

    In this tutorial, we'll continue exploring GSAP and its friends. Specifically, we'll cover various methods for creating sliding pinned horizontal sections...

  2. 15 Inspiring and Awesome CSS Animation Examples on CodePen

    15 Inspiring and Awesome CSS Animation Examples 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 coolest CSS effects and great image...

  3. Build a Grid-to-Full-Screen Image Animation With CSS (and a Touch of JavaScript)

    Build a Grid-to-Full-Screen Image Animation With CSS (and a Touch of JavaScript)

    Tutorial • Beginner

    In this tutorial, you'll learn a motion effect where a split-screen image grid layout will turn into a full-screen image.

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

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

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

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

  8. Best CSS Animations and Effects on CodeCanyon 2025 (Paid + Free)

    Best CSS Animations and Effects on CodeCanyon 2025 (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...

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

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

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

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

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.