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

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

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

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

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

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

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

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

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

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

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

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

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.