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. Getting Started With ScrollMagic

    Getting Started With ScrollMagic

    Course Intermediate

    The proliferation of JavaScript front-end libraries has made many tasks simpler for web designers and developers. In this short course, you will be...

  2. 9 Popular Courses on CSS Animation

    9 Popular Courses on CSS Animation

    Tutorial Beginner

    Are you up to date with all the latest techniques of web animation using CSS, JavaScript, easing, SVGs, and special frameworks like the GreenSock Animation...

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

  4. New Course: Practical Animation With GSAP

    New Course: Practical Animation With GSAP

    Tutorial Beginner

    If you want to learn more about creating beautiful web animations, our new course is for you. In 3 GreenSock Projects: Practical Animation With GSAP, you'll...

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

  6. 3 GreenSock Projects: Practical Animation With GSAP

    3 GreenSock Projects: Practical Animation With GSAP

    Course Intermediate

    In this course, I’ll walk you through three projects where you will learn how to create programmatic animations, in real-world scenarios, using the GreenSock...

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

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

  9. New Course: Advanced Animation With GSAP Plugins

    New Course: Advanced Animation With GSAP Plugins

    Tutorial Beginner

    The GreenSock Animation Platform is a powerful JavaScript library for animating HTML elements in the browser. In our new course, Advanced Animation With GSAP...

  10. Learn Motion UI From Top to Bottom

    Learn Motion UI From Top to Bottom

    Course Intermediate

    In this short course you’ll learn everything you need to know about Motion UI, the Sass library for transitions and animations from ZURB. We'll cover...

  11. Advanced Animation With GSAP Plugins

    Advanced Animation With GSAP Plugins

    Course Intermediate

    The GreenSock Animation Platform is a powerful JavaScript library for animating HTML elements in the browser. In this course, you will go beyond the basics...

  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.