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. New Coffee Break Course on CSS Keyframe Animations

    New Coffee Break Course on CSS Keyframe Animations

    Tutorial • Beginner

    CSS keyframe animations offer designers a powerful way to create animations in the browser without having to rely on external plugins or extensive...

  2. New Course: Advanced Animation With GSAP Plugins

    New Course: Advanced Animation With GSAP Plugins

    Tutorial • Beginner

    The GreenSock Animation Platform is a powerful JavaScript library for animating HTML elements in the browser. In our new course, Advanced Animation With GSAP...

  3. Quick Tip: Scroll Animations With fullPage.js and Animate.css

    Quick Tip: Scroll Animations With fullPage.js and Animate.css

    Tutorial • Intermediate

    In this quick tip, I’ll show you how to create scroll-based animations with fullPage.js and animate.css.

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

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

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

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

  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.