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. What Is the GreenSock Animation Platform?

    What Is the GreenSock Animation Platform?

    Tutorial • Beginner

    GreenSock is a JavaScript framework which makes it easy to animate HTML elements. In this quick video tutorial, you'll get an overview of GreenSock and its...

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

  3. Motion Design With Principle for Mac

    Motion Design With Principle for Mac

    Course • Beginner

    Creating beautiful graphics is a must for any good app, but it’s the transitions between states and information which make for a great UI. This short course...

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

  5. Scroll Events Made Easy

    Scroll Events Made Easy

    Course • Beginner

    Many beginner web designers shy away from slick effects like parallax scrolling simply because they're afraid of JavaScript. In this lesson, you'll learn how...

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

  7. GreenSock Animation Platform: First Steps

    GreenSock Animation Platform: First Steps

    Course • Intermediate

    GreenSock is a JavaScript framework which makes it easy to animate HTML elements. During this course, you will take your first steps in learning how to use...

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

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

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

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

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

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.