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

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

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

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

  5. TimelineMax: An Introduction to Tweening

    TimelineMax: An Introduction to Tweening

    Tutorial • Intermediate

    In the olden days of animation tweening was a term used to describe a frame by frame sequence, or what’s sometimes referred to as “in-betweens.” It’s that...

  6. TimelineMax: A Primer

    TimelineMax: A Primer

    Tutorial • Intermediate

    What is TimelineMax? What makes it different from other Green Sock Animation Platform (GSAP) libraries? Why would I need TimelineMax over TimelineLite? How...

  7. Create an Animated SVG Loader Using GreenSock’s DrawSVG

    Create an Animated SVG Loader Using GreenSock’s DrawSVG

    Tutorial • Intermediate

    Today’s tutorial is one that will leave you feeling impressed that you’ve written so little code to achieve such a delightful animation. DrawSVG by the...

  8. How to Demo an iOS Prototype in Keynote

    How to Demo an iOS Prototype in Keynote

    Tutorial • Intermediate

    Modeling an up-and-coming app can be a very difficult task if you’re unfamiliar with professional animation software and techniques. Fortunately, Keynote...

  9. How to Use “animateTransform” for Inline SVG Animation

    How to Use “animateTransform” for Inline SVG Animation

    Tutorial • Beginner

    Today we’ll be stepping you through the basics of using “animateTransform” to generate inline animations with SVG (scalable vector graphics).

  10. How to Create CSS Animations Visually With Stylie

    How to Create CSS Animations Visually With Stylie

    Tutorial • Beginner

    Animating on the web can be easy and fun. This tutorial will show you how to use a tool called Stylie to create beautiful animations with just your mouse.

  11. How to Manipulate and Animate SVG With Snap.svg

    How to Manipulate and Animate SVG With Snap.svg

    Tutorial • Beginner

    In this tutorial we're going to introduce Snap.svg, a JavaScript library which assists in animating and manipulating SVG content. To demonstrate some of the...

  12. How to Use After Effects for Web Animation Prototypes

    How to Use After Effects for Web Animation Prototypes

    Tutorial • Beginner

    In this screencast tutorial we're going to prototype an app UI animation. We'll take a Photoshop layout, then bring it to life using Adobe After Effects.

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.