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
Tutorials

All Animation tutorials:

  1. How to use Lotties in Figma

    How to use Lotties in Figma

    Tutorial • Intermediate

    In the following step, I will show you how to put together an animation in Figma and then how to convert it into a lottie animation.

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

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

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

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

  6. Introduction to Animations in React

    Introduction to Animations in React

    Tutorial • Beginner

    In the last couple of React tutorials, you got familiar with basic React concepts like JSX, routing, and forms. In this tutorial, we'll take it to the next...

  7. How to Create Mobile App Animations With SVGator

    How to Create Mobile App Animations With SVGator

    Tutorial • Beginner

    In this tutorial, you’ll learn how to create animations for mobile apps with SVGator, an online SVG animator tool. You’ll see how fast and simple it is to...

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

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

  10. How to Use Animation in Angular 6

    How to Use Animation in Angular 6

    Tutorial • Beginner

    In this tutorial, you'll learn about the importance of animations in improving the user experience. I'll show you how to incorporate animations in Angular 6...

  11. Design Better UX With Vue.js Transitions and Animations

    Design Better UX With Vue.js Transitions and Animations

    Tutorial • Intermediate

    Most people think that the purpose of animations is to engage the user's attention, but on most websites, engagement should be secondary to communication. So...

  12. Create the Perfect Carousel, Part 3

    Create the Perfect Carousel, Part 3

    Tutorial • Advanced

    We explore keyboard accessibility and delightful interactions in the final part of our quest to create the perfect carousel.

Related Categories

JavaScript
WordPress
Mobile Development
PHP
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.