- Overview
- Transcript
1.1 Welcome to the Course
Hello and welcome to this Envato Tuts+ course. I’m Adi Purdila, and in this course we’ll learn about web animation performance.
As a CSS student, you probably know how to create an animation, or at least look up the correct syntax to animate something in the browser. That might be with a transition, keyframes, or even JavaScript. However, there is a big difference between a smooth animation and a laggy or jittery one.
Ideally we want all our animations to be silky smooth because it’s more pleasing to the eye and leads to a better user experience. And this is totally doable as long as we do certain things just right. This is exactly what we’ll learn in this course.
We have a lot of ground to cover, so let’s get started with lesson #1. See you there!
Related Links
1.Introduction
1.1Welcome to the Course01:31
2.Web Animation Performance
2.1An Introduction to Web Animation Performance04:46
2.2How to Achieve High-Performance Animations24:44
2.3How Browsers Work Behind the Scenes04:17
2.4How to Measure Animation Performance10:33
2.5CSS vs. JavaScript Animations06:42
2.6A Simple Example of Animation Optimization09:48
1.1 Welcome to the Course
Hello and welcome to this Envato Tuts+ course. I'm Andi Purdila, and in this course we're going to learn about web animation performance. Now, we all know how to create an animation, right? Either with a transition, key frames, or even JavaScript. Animations are pretty easy to do, however, there is a big difference between a smooth animation and a laggy or a jittery one. Obviously, we all want our animations to be silky smooth because it's more pleasing to the eye, and it leads to a better user experience. And that's totally doable as long as we do a couple of things just right, and this is exactly what we'll learn in this course. Here's how we break it down, first, we'll do a short introduction to web animation performance. Then we'll learn what makes an animation high performance. In lesson three, we'll lift the curtain and see how the browsers work behind the scenes. Lesson four will be about the tools we can use to measure this performance. Then in lesson five, we'll briefly explore the benefits of using CSS versus JavaScript animations. And finally in lesson six, we'll take a simple example of an animation done wrong, we'll fix it and we'll compare it's before and after performance. We have a lot of ground to cover, so let's get started with lesson number one. See you there.
