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 more
Read less
All content
Courses
Tutorials

All Animation content:

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

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

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

  4. TimelineMax: Understanding the Mechanics

    TimelineMax: Understanding the Mechanics

    Tutorial • Beginner

    Mechanics is defined as an area concerned with the behavior of objects subjected to forces or displacements, and the subsequent effects of those objects on...

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

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

  7. New Course: CSS Animation in the Real World

    New Course: CSS Animation in the Real World

    Tutorial • Beginner

    When it comes to choosing a CSS animation, you’ve got a world of choice at your fingertips. There are thousands available, but which should you use, and...

  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 Elements.
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.
Quick LinksExplore popular categories