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.

All Animation content:

  1. How to Create an App Prototype Using CSS and JavaScript

    How to Create an App Prototype Using CSS and JavaScript

    Tutorial Intermediate

    Animation really is one of the best features to hit CSS in a long time. After all, as we’ve come to realise, motion can enhance user experience and encourage...

  2. Adding Physics-Based Animations to Android Apps

    Adding Physics-Based Animations to Android Apps

    Tutorial Beginner

    Learn how to use Dynamic Animation to create physics-based animations in an Android app that closely resemble the movements of objects in the real world.

  3. How to Use CSS Variables for Animation

    How to Use CSS Variables for Animation

    Tutorial Intermediate

    Not only are CSS variables a real and tangible option for developers, they can also be used in animation scenarios. Still skeptical? Follow along to find out...

  4. The State of CSS Animation

    The State of CSS Animation

    Tutorial Intermediate

    CSS has matured in many ways over the years, not least in terms of CSS animations. With each day that passes more and more developers are creating living,...

  5. Introduction to MoJs: Motion For the Web

    Introduction to MoJs: Motion For the Web

    Tutorial Intermediate

    In this screencast I’m going to explain how to get started with MoJs (mo.js); a JavaScript library for creating web-based motion graphics.

  6. 10 Examples of Animation on CodePen You Can Learn From

    10 Examples of Animation on CodePen You Can Learn From

    Tutorial Beginner

    CodePen is a great place to find inspiration and see what crazy UI experiments others are coming up with. As well as this, it’s also a useful place to find...

  7. A Web Designer’s Introduction to Adobe Animate CC

    A Web Designer’s Introduction to Adobe Animate CC

    Tutorial Intermediate

    What’s better than being static? Being in motion, my good friends. Motion is on the rise for the web, from simple interface interactions, to more complex...

  8. New Short Course: A Visual Guide to CSS Animation

    New Short Course: A Visual Guide to CSS Animation

    Tutorial Beginner

    It’s now possible to create awesome animation effects using pure CSS, without a scrap of JavaScript in sight. In our new short course, A Visual Guide to CSS...

  9. How to Make Magic, Animated Tooltips With CSS

    How to Make Magic, Animated Tooltips With CSS

    Tutorial Intermediate

    Tooltips are a great way to enhance a UI when your users need some extra context for that fancy icon, or when they want some reassurance for clicking a...

  10. 3 Courses to Help You Master Scrolling Animation

    3 Courses to Help You Master Scrolling Animation

    Tutorial Beginner

    Scrolling animation can be a great way to provide more interest for your users and to make your websites more interactive. The idea is that, as a user...

  11. Get Hands-On With These 8 Practical Project-Based Courses

    Get Hands-On With These 8 Practical Project-Based Courses

    Tutorial Beginner

    In this article, I'm going to give you a quick introduction to eight courses that are designed to let you learn by building things yourselves—with...

  12. Getting Started With ScrollMagic

    Getting Started With ScrollMagic

    Tutorial Beginner

    In our new short course, Getting Started With ScrollMagic, you'll learn how to use the ScrollMagic library, which simplifies the process of creating...