Loading
Current section: Animation 7 exercises
lesson

Creating Engaging UI Animations

Loading lesson

Transcript

00:00 We're going to have a lot of fun in this exercise and add animations to our UI. This is the end result we're going for. So I don't know about you, but when I see animations like this, I instantly start thinking of JavaScript animation. Some library like GSAP or Frame of Motion can do that really well.

00:17 But believe it or not, here we're going to use exclusively CSS keyframe animations to achieve this result. We're going to start small with simple enter animations, then enhance that with a cool role reveal effect on the logo tiles. And then we're going to crank it to 11 with a staggered animation delay that's going to make it look like a waterfall entry and look super cool.

00:36 But while saying that, we're also going to respect users that have set prefers reduced motion in their OS settings to make sure that we don't force an effect that can feel jarring to some people. We'll have a nice simple fade-in replacement for those who prefer reduced motion. I think it's going to be great. So strap in, there's a lot of work. Let's get into it.