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

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

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

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

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

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

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

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

  9. 3D Animation With Three.js

    3D Animation With Three.js

    Course Intermediate

    In our previous Three.js courses, we covered the essentials of getting around in the Three.js framework. In this course, we’re going to build on that...

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

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

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