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

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

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

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

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

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

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

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

  9. Create the Perfect Carousel, Part 2

    Create the Perfect Carousel, Part 2

    Tutorial • Advanced

    Continue the quest to create a perfect carousel and learn how to incorporate mouse scroll, pagination animations, and a progress indicator.

  10. Create the Perfect Carousel, Part 1

    Create the Perfect Carousel, Part 1

    Tutorial • Advanced

    Carousels are a staple of e-commerce sites. Learn to create a mouse, keyboard and touch-accessible carousel, using tweens, physics, and input tracking.

  11. A First Look at “GSDevTools” by GreenSock

    A First Look at “GSDevTools” by GreenSock

    Tutorial • Intermediate

    For this article I’m pleased to present a wonderful addition to the GSAP platform titled “GSDevTools”. This is a collection of tools that will certainly...

  12. Introducing Haiku: Design and Create Motion (Code Optional)

    Introducing Haiku: Design and Create Motion (Code Optional)

    Tutorial • Beginner

    With motion on the rise amongst web developers so too are the tools that help to streamline its creation. Haiku is a stand-alone application available to Mac...

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.