Animation

Loading "Creating Engaging UI Animations"

Animations can bring life and personality to a website or application.

It's really easy to over-do it though, so let's not get carried away.

We're going to add a simple touch of "enter" animation on elements when the page loads.

JavaScript animations

If you dive into the world of web animations, it won't be long before you bump into libraries like GSAP or Framer Motion.

These are extremely powerful and allow you to create really advanced animations, like those you can see on the Awwwards website.

There are also smaller footprint libraries like Motion One, a fairly thin wrapper around the Web Animations API.

With that said, we're going to use CSS to power our animations here. And as you'll see, CSS animations can take you surprisingly far.

CSS animations

Animation sequences in CSS are defined using 📜 @keyframes.

An animation is then defined using the animation shorthand property, or its sub-properties.

💰 Make sure you look into the 📜 animation sub-properties, as some of those will come handy in this exercise!

Defining `@keyframes`

Here's an example of defining a simple "fade in" animation with @keyframes:

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

The first keyframe (from — which can also be 0%) defines the state of the element at the start of the animation.

Th last keyframe (to — which can also be 100%) defines the state of the element at the end of the animation.

In the example above, the animation will start with the element at opacity: 0, and end with the element at opacity: 1.

🦉 You can define many more intermediate keyframes — you're not limited to just the first (0%) and last (100%)!

Defining an `animation`

To wire up our keyframes definition, we need to define an animation which references it.

.animate-fade-in {
	animation: fade-in 1s ease-in-out;
}

The fade-in value here refers to the @keyframes definition we created earlier. The .animate-fade-in class will:

run the animation over 1 second (see 📜 animation-duration)
use an ease-in-out 📜 timing function.

Animations in Tailwind CSS

Out of the box, Tailwind CSS comes with a few 📜 default CSS keyframe animations such as animate-spin or animate-pulse.

You can 📜 define custom CSS animations by configuring the keyframes and animation keys of your Tailwind theme.

Here's what our fade-in example animation from above would look like in the Tailwind theme:

// tailwind.config.ts
export default {
	// ...
	theme: {
		extend: {
			keyframes: {
				'fade-in': {
					from: { opacity: 0 },
					to: { opacity: 1 },
				},
			},
			animation: {
				'fade-in': 'fade-in 1s ease-in-out',
			},
		},
	},
}

Let's get to work

In this exercise, you're going to configure custom CSS animations in Tailwind, and apply them to elements on the page we're implementing:

a fairly simple "fade-and-slide" animation for the text content section
a more evolved "roll reveal" animation for the logo tiles

You'll also configure animation delays on different elements, and change the animation on the extra-large screen size and above.

👨‍💼 The cherry on top will be the "logo stagger" effect. Oh, the design team will love you for that!