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

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

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

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

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

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

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

  10. Animations to Take Your Basic HTML Template to the Next Level

    Animations to Take Your Basic HTML Template to the Next Level

    Tutorial • Beginner

    In this article I will share with you some practical animation examples and techniques to make your basic HTML web page shine like a star.

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

  12. Enhance the Way a Web Page Loads With CSS Animations

    Enhance the Way a Web Page Loads With CSS Animations

    Tutorial • Intermediate

    In a previous tutorial we created a full-screen responsive page with flexbox. Today, we’ll make this page more attractive by adding a few CSS animations to it.

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.