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. 10 Recommended GitHub Repos for Motion on the Web

    10 Recommended GitHub Repos for Motion on the Web

    Tutorial • Beginner

    In this article I’ll bring to light some fantastic projects freely available on GItHub that have a strong focus on helping animators building motion for the...

  2. Adobe Alternatives: Animation Software

    Adobe Alternatives: Animation Software

    Tutorial • Beginner

    Welcome to the final entry in our series exploring the creative software we have at our disposal outside the familiar world of Adobe. In this article we’ll...

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

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

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

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

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

  8. SVG Brilliance: 10 Inspiring Examples From Around the Web

    SVG Brilliance: 10 Inspiring Examples From Around the Web

    Tutorial • Beginner

    Scalable vector graphics (SVG) need no introduction for web designers. They scale up and down crisply, play nicely with animations, they’re a powerful format...

  9. Get Started With Web Animation

    Get Started With Web Animation

    Tutorial • Beginner

    In this article, I’ll run through the steps involved in learning animation for the web, from what it’s all about, though straightforward transitions, more...

  10. How to Animate a Coffee-Drinking Sprite With ScrollMagic

    How to Animate a Coffee-Drinking Sprite With ScrollMagic

    Tutorial • Intermediate

    Creating scroll-initiated motion can be immensely gratifying. We’ll be diving into a particular effect seen on the Casper Mattress website (created by Jonnie...

  11. New Coffee Break Course on CSS Keyframe Animations

    New Coffee Break Course on CSS Keyframe Animations

    Tutorial • Beginner

    CSS keyframe animations offer designers a powerful way to create animations in the browser without having to rely on external plugins or extensive...

  12. Quick Tip: Scroll Animations With fullPage.js and Animate.css

    Quick Tip: Scroll Animations With fullPage.js and Animate.css

    Tutorial • Intermediate

    In this quick tip, I’ll show you how to create scroll-based animations with fullPage.js and animate.css.

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.