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. A Guide to Creating Accessible Animations

    A Guide to Creating Accessible Animations

    Tutorial • Intermediate

    Creating accessible animations is an important part of user experience. Motion on the screen can make people dizzy, nauseous, or worse. In this guide, I’ll...

  2. How to Easily Animate SVGs With SVGator

    How to Easily Animate SVGs With SVGator

    Tutorial • Beginner

    SVG animation is a great alternative to using animated GIFs on the web, but it’s not always easy. In this tutorial I’m going to explain how you can easily...

  3. 11 Practical Web Animation Courses

    11 Practical Web Animation Courses

    Tutorial • Beginner

    Here are 11 courses that will teach you how to create beautiful animations with CSS, JavaScript, and dedicated frameworks like GreenSock and Sequence.js.

  4. How to Animate a World Mental Health Day SVG Ribbon

    How to Animate a World Mental Health Day SVG Ribbon

    Tutorial • Intermediate

    To mark World Mental Health Day we’re going to be using CSS to animate an SVG centered on the green ribbon many people wear to symbolize mental health...

  5. How to Use the Animation Inspector in Chrome DevTools

    How to Use the Animation Inspector in Chrome DevTools

    Tutorial • Beginner

    Next time you’re putting together some CSS3-based animations you might find it helpful to jump into Chrome DevTools and take advantage of its animation...

  6. How to Enhance Your Website With Motion Graphics

    How to Enhance Your Website With Motion Graphics

    Tutorial • Beginner

    Adding movement to websites has long been a powerful way to stand out. Motion graphics can help you take things a step further by providing a...

  7. AniJS: Easy CSS Animations Without Coding

    AniJS: Easy CSS Animations Without Coding

    Tutorial • Beginner

    This tutorial will introduce you to a library called AniJS which can be used to add simple animations to your webpages without worrying about the underlying...

  8. How to Create a Loader Icon With SVG Animation

    How to Create a Loader Icon With SVG Animation

    Tutorial • Beginner

    In this tutorial you’re going to learn how to make a very simple loader icon using SVG animation. What we’ll be covering is different from CSS animation—SVG...

  9. Inspiration: 10 Examples of Pure CSS Animation on CodePen

    Inspiration: 10 Examples of Pure CSS Animation on CodePen

    Tutorial • Beginner

    Let’s take a look at what amazing things people are making and animating with only HTML and CSS.

  10. How to Quickly Add Microinteractions to Your Website

    How to Quickly Add Microinteractions to Your Website

    Tutorial • Beginner

    In today’s quick tip I’m going to show you how to add microinteractions to your website using a JavaScript library called micron.js.

  11. Spirit App: Easy Realtime Animation For the Web

    Spirit App: Easy Realtime Animation For the Web

    Tutorial • Beginner

    In this article we’ll take a look at the newest tool available for web animators called “Spirit” by Patrick Brouwer. We’ll learn how it can change the way...

  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

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.