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.
  1. How to Build a Coming Soon Page With Lottie Animations

    How to Build a Coming Soon Page With Lottie Animations

    Tutorial Intermediate

    In a previous tutorial, we learned how to include Adobe After Effects animations on a page using the Lottie for Web library. Today, we’ll learn how to repeat...

  2. Build a JavaScript Page Loading Animation With GSAP

    Build a JavaScript Page Loading Animation With GSAP

    Tutorial Beginner

    In today’s tutorial, we’ll learn how to create a JavaScript page loading animation with GSAP, one of the most dominant and popular JavaScript animation...

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

  4. How to Create Smooth Page Transitions with JavaScript

    How to Create Smooth Page Transitions with JavaScript

    Tutorial Intermediate

    In this JavaScript tutorial you’ll learn how to create an animated page transition with a JavaScript library called Highway.

  5. How to Add Adobe After Effects Animations to a Web Page

    How to Add Adobe After Effects Animations to a Web Page

    Tutorial Beginner

    Complex animations are increasingly implemented in web pages and applications, so today I’ll explain how to add Adobe After Effects animations to a web page.

  6. Beginner to Advanced With Adobe XD Auto-Animate

    Beginner to Advanced With Adobe XD Auto-Animate

    Course Beginner

    Master the art of Adobe XD animation in this free Adobe XD tutorial. You'll learn how to use Adobe XD auto-animate to bring your prototypes to life! Adobe...

  7. Try Our Practical Web Animation Course, With New Bonus Projects!

    Try Our Practical Web Animation Course, With New Bonus Projects!

    Tutorial Beginner

    Join the thousands of people who have learned web animation in our popular course, Practical Web Animation. Try some of the brand new projects we've added.

  8. Practical Web Animation

    Practical Web Animation

    Course Intermediate

    The days of animation-heavy websites are fading, but there is still something to be said for a site with small amounts of subtle, eye-catching motion to help...

  9. Try a New Short Course on Adobe XD Auto-Animate

    Try a New Short Course on Adobe XD Auto-Animate

    Tutorial Beginner

    Auto-animate is a simple yet powerful feature in Adobe XD, which allows us to link together artboards in our prototype with beautiful, authentic animation....

  10. How to Draw Patterns with CSS Using CSS Doodle

    How to Draw Patterns with CSS Using CSS Doodle

    Tutorial Intermediate

    CSS helps us get creative in all kinds of ways, and today we’re going to take our CSS creativity to the next level. We’re going to use a tool called CSS...

  11. Better Data Presentation for Infographics: Practical Animation Examples

    Better Data Presentation for Infographics: Practical Animation Examples

    Tutorial Beginner

    Using the animation framework we created previously, in this tutorial you’ll learn how to animate three infographic examples: data counters, progress bars,...

  12. Create an Animated SVG Logo for International Women’s Day 2019

    Create an Animated SVG Logo for International Women’s Day 2019

    Tutorial Beginner

    To mark International Women's Day 2019 we’ll be creating an animated SVG version of the event’s logo you can use along with this year’s hashtag...