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 content:

  1. Creating Animated HTML5 Page Transitions

    Creating Animated HTML5 Page Transitions

    Course • Intermediate

    Animation in modern websites is usually limited to hover effects, banner sliders, and the like. More rarely might we see websites that transition from one...

  2. Inspiration: 10 Examples of Pure CSS Animation on CodePen

    Inspiration: 10 Examples of Pure CSS Animation on CodePen

    Tutorial • Beginner

    Let’s take a look at what amazing things people are making and animating with only HTML and CSS.

  3. How to Quickly Add Microinteractions to Your Website

    How to Quickly Add Microinteractions to Your Website

    Tutorial • Beginner

    In today’s quick tip I’m going to show you how to add microinteractions to your website using a JavaScript library called micron.js.

  4. Spirit App: Easy Realtime Animation For the Web

    Spirit App: Easy Realtime Animation For the Web

    Tutorial • Beginner

    In this article we’ll take a look at the newest tool available for web animators called “Spirit” by Patrick Brouwer. We’ll learn how it can change the way...

  5. Create the Perfect Carousel, Part 3

    Create the Perfect Carousel, Part 3

    Tutorial • Advanced

    We explore keyboard accessibility and delightful interactions in the final part of our quest to create the perfect carousel.

  6. Create the Perfect Carousel, Part 2

    Create the Perfect Carousel, Part 2

    Tutorial • Advanced

    Continue the quest to create a perfect carousel and learn how to incorporate mouse scroll, pagination animations, and a progress indicator.

  7. Create the Perfect Carousel, Part 1

    Create the Perfect Carousel, Part 1

    Tutorial • Advanced

    Carousels are a staple of e-commerce sites. Learn to create a mouse, keyboard and touch-accessible carousel, using tweens, physics, and input tracking.

  8. How to Create Simple Button Fades With CSS

    How to Create Simple Button Fades With CSS

    Tutorial • Beginner

    In this video from my course on Practical Web Animation, you'll learn how to create a simple hover effect for navigation menu buttons using CSS.

  9. A First Look at “GSDevTools” by GreenSock

    A First Look at “GSDevTools” by GreenSock

    Tutorial • Intermediate

    For this article I’m pleased to present a wonderful addition to the GSAP platform titled “GSDevTools”. This is a collection of tools that will certainly...

  10. Introducing Haiku: Design and Create Motion (Code Optional)

    Introducing Haiku: Design and Create Motion (Code Optional)

    Tutorial • Beginner

    With motion on the rise amongst web developers so too are the tools that help to streamline its creation. Haiku is a stand-alone application available to Mac...

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

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

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.