Animation on the Web
Workshop — Cancelled
Location: — — —
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
- 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.
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.
- 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.