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. Ease in to Cubic Bezier Functions in Our Coffee Break Course

    Ease in to Cubic Bezier Functions in Our Coffee Break Course

    Tutorial • Beginner

    One way to breath a bit more life and a bit more personality into animation on the web is to experiment with different settings of easing. In this Coffee...

  2. Revisiting the CSS Background Property

    Revisiting the CSS Background Property

    Tutorial • Intermediate

    In this tutorial we’re going to look into one of the older, more familiar CSS properties: background. background is one of several CSS properties whose...

  3. What to Expect From Web Design in 2016

    What to Expect From Web Design in 2016

    Tutorial • Beginner

    2015 was a year to remember! From the first shipment of the Apple Watch to the landing of the Mars rover, to the long-awaited release of the next instalment...

  4. Completing Our Draggable Off-Canvas Menu with GreenSock

    Completing Our Draggable Off-Canvas Menu with GreenSock

    Tutorial • Advanced

    In the first part of this Draggable journey, we discussed how to include scripts, investigated the ThrowPropsPlugin, including the requirements to jump start...

  5. Timeline-Based Animation for the Web with Hype 3

    Timeline-Based Animation for the Web with Hype 3

    Tutorial • Beginner

    Hype 3, by Tumult, is an OS X application for creating HTML5 animations. If you ever used Flash’s iconic timeline tools, Hype 3’s interface will seem very...

  6. Silky Smooth Web Animation with Velocity.js

    Silky Smooth Web Animation with Velocity.js

    Tutorial • Intermediate

    Animation, when thoughtfully applied, can improve website interfaces and, ultimately, the user experience of a website. In this tutorial, we are going to...

  7. TimelineMax: Getting a Handle on Bézier Tweening

    TimelineMax: Getting a Handle on Bézier Tweening

    Tutorial • Intermediate

    Plugins for GSAP are great when you need advanced capabilities. The BezierPlugin I’ll be explaining in this tutorial helps animate virtually any property (or...

  8. Introducing ScrollMagic 2.0

    Introducing ScrollMagic 2.0

    Tutorial • Intermediate

    If you’re desperate to generate beautiful scroll animations in your next project, then look no further. ScrollMagic is a JavaScript library to help you...

  9. Sign on the Dotted Line: Finishing Your Animation With Waypoints

    Sign on the Dotted Line: Finishing Your Animation With Waypoints

    Tutorial • Intermediate

    In the previous tutorial we animated an SVG signature using CSS. It’s a great effect, making it appear as though the words are being written right there on...

  10. Sign on the Dotted Line: Animating Your Own SVG Signature

    Sign on the Dotted Line: Animating Your Own SVG Signature

    Tutorial • Intermediate

    Animating the stroke of an SVG is perfect for simulating handwriting. Over the course of two tutorials we’re going to use CSS animation to make a signature...

  11. TimelineMax: Controlling Playback With addPause()

    TimelineMax: Controlling Playback With addPause()

    Tutorial • Intermediate

    In this tutorial we’ll learn how to control animations, on demand, using a method called addPause(). Ready? Set? … slight pause … Let’s go!

  12. Adding Appeal to Your Animations on the Web

    Adding Appeal to Your Animations on the Web

    Tutorial • Intermediate

    How to add appeal to your designs by combining multiple animations, delays and timing functions.

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.