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. HTML5 Canvas Optimization: A Practical Example

    HTML5 Canvas Optimization: A Practical Example

    Tutorial • Intermediate

    If you've been doing JavaScript development long enough, you've most likely crashed your browser a few times. The problem usually turns out to be some...

  2. How to edit text in Lottie images

    How to edit text in Lottie images

    Tutorial • Beginner

    In this short tutorial, you will learn how to edit text in lottie images using different source files.

  3. How to create a Lottie loading animation

    How to create a Lottie loading animation

    Tutorial • Beginner

    In the following tutorial, I'll show you how to create a lottie loading animation using Figma.

  4. How to use Lottie animations

    How to use Lottie animations

    Tutorial • Beginner

    Learn how to use Lottie animations to add smooth, lightweight motion to websites, apps, games, videos and more—with no animation skills required!

  5. How to create an animated Lottie logo

    How to create an animated Lottie logo

    Tutorial • Intermediate

    Learn how to make a Lottie animation by preparing your Adobe Illustrator files for animation in After Effects. This tutorial covers organizing layers,...

  6. Everything you need to know about Lottie animations

    Everything you need to know about Lottie animations

    Tutorial • Beginner

    Learn all about Lottie animations, from what they are and why they’re used to how to create, optimize, and integrate them into your designs!

  7. How to create a Lottie animation

    How to create a Lottie animation

    Tutorial • Beginner

    Turn a static SVG illustration into a lively Lottie animation with smooth keyframes, dynamic motion, and seamless looping effects!

  8. How to create a Lottie text animation

    How to create a Lottie text animation

    Tutorial • Beginner

    In the following tutorial, you will learn how to create a lottie animation in After Effects.

  9. How to animate on scroll with vanilla JavaScript

    How to animate on scroll with vanilla JavaScript

    Tutorial • Intermediate

    In this tutorial, we’ll combine CSS animations and JavaScript event listeners to create an animate on scroll feature that works on all browsers.

  10. How to build horizontal marquee effects with GSAP

    How to build horizontal marquee effects with GSAP

    Tutorial • Intermediate

    Let me show you how to create infinite marquees with the GSAP JavaScript animation library. This is a common UX pattern I’m sure you’ve seen on plenty of sites.

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

  12. Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

    Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

    Tutorial • Beginner

    In this tutorial, you'll learn how to build an asymmetric JavaScript slideshow with the power of CSS Grid and GSAP, the industry-standard JavaScript...

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.