Animation

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:

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!