Animation on the Web

You know how to build static websites. Now breathe some life into them using animation! Get inspired by some of the best animation examples on the web and learn all about the techniques that power animation on the web.

Through a series of fun examples, we'll build up our toolbox of animation techniques; starting with simple hover techniques using CSS transitions and moving to keyframe animation using CSS animations. We'll tackle timelines using GSAP, and lastly, we'll learn about Lottie which allows us to bring After Effects animations into the web.

Throughout this course we'll build:

• An animated portfolio website
• A simple Pinterest clone
• Tinder-like swipe animations

Goals

• Grasp the different animation techniques available: transitions, keyframes, GSAP, Lottie
• Build a number of fun example projects to understand the techniques.
• Understand which technique to use for which project.

Requirements

This course is for students with a bit of background in HTML/CSS. We will use JavaScript, but no prior experience is necessary. If you need a refresher, you can watch a recording of our web introduction course.

We'll also be using After Effects to demonstrate Lottie. If you don't have After Effects you can use pre-built animations from Lottiefiles.

Next Steps

• Get inspired by examples from the GSAP showcase.
• Use existing animations from Lottiefiles.
• Go more in depth and see some examples of CSS animations at MDN.