Creating complex animations in TailwindCSS
In this article, we’re going to explore how to create impressive and complex animations using TailwindCSS. TailwindCSS is a highly popular utility-first CSS framework that allows developers to build modern, responsive, and visually appealing user interfaces with ease.
Utility-first CSS is the notion of composing many small utilitarian classes together. With this, the aim is to allow you to create robust, scalable and responsive user interfaces for the web
Introduction to TailwindCSS
Before we dive into complex animations, let’s briefly introduce TailwindCSS. It’s a CSS framework that focuses on providing a wide range of utility classes that you can directly apply to your HTML elements, allowing you to build your UI components without writing custom CSS. The flexibility of TailwindCSS enables developers to achieve various design styles and animations without the need for extensive CSS code.
Prerequisites
- TailwindCSS Setup
- Basic understanding of CSS, Animations in CSS.
What we will be building
Getting Started with Tailwind CSS Animations
Before diving into animations, make sure you have set up Tailwind CSS in your project.
Tailwind CSS provides a limited set of utility classes for animations that can be applied to HTML elements. Let's explore them.
Applying Animations
We have a lot of preset animations available in TailwindCSS i.e. Spin, Bounce, Ping, Pulse, etc. To apply an animation to an element, you simply need to add the animate class followed by the desired animation name. For example, to apply a spin animation, you can use the class animate-pulse. Let's look at an example:
<div class="animate-pulse">
Look Mom! I am pulsing!
</div>
<!--
animate-pulse applies this css to the div
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
-->This will apply the “pulsing” animation to the div element, making it pulse on the screen when the page loads.
Defining Custom Animations
To create our own custom animations or customize the existing animation we can do it in the tailwind.config.js
To add a new animation @keyframes, use the keyframes section of your theme configuration and add animation in animation section.
module.exports = {
theme: {
extend: {
animation: {
//Customizing existing animations.
'spin-slow': 'spin 3s linear infinite',
//Add new animation
'my-animation' : 'new-animation 3s linear infinite',
},
keyframes: {
//Add keyframes for the new animation here
'new-animation': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
}
}
}
}Using this utility we will be creating our own custom animation. For that, we will need to first add @keyframes of our animation.
module.exports = {
theme: {
extend: {
keyframes: {
//Our fall animation keyframes
fall: {
'0%': { transform: 'translate(0%,-150%) skewX(0deg)' },
'50%': { transform: 'translate(0%,0%) skewX(-10deg)' },
'100%': { transform: 'translate(0%,150%) skewX(0deg)' },
},
},
animation: {
// You can then reference these keyframes by name in the
// animation section of your theme configuration
fall: 'fall 3s ease infinite',
// animation shorthand CSS property i.e
// animation-name | animation-duration | animation-timing-function
// animation-iteration-count
}
}
}
}To know more about animation short hand css property, visit https://developer.mozilla.org/en-US/docs/Web/CSS/animation
In short, it’s something like thisanimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state, andanimation-timeline.
Once we do this, now we will be able to apply our fall animation to any element by applying class animate-fall .
Voila! Our fall animation is ready to use.
(but wait a min….)
(This isn't what you promised at the start, where’s the cool wavy fall and the second word?)
Patience is bitter, but its fruit is sweet.
Let’s dissect our Animation.
- The word “Develop” descends from the top, and expands outward to the bottom.
- Upon the exit of “Develop,” the word “Design” gracefully descends to the center, taking care to introduce a delay equal to half of one animation cycle (1.5 seconds in this case) to ensure synchronization.
- Each letter of “Develop” and “Design” descends in a wavy pattern, with a delay of either 100ms or 150ms between each letter’s fall, creating a delightful visual effect.
But how do we do it? We can only define one animation in the tailwind.config.js and there’s no utility class to apply animation delay as well.
There are 2 ways of doing this.
- Using Arbitrary values
If we need to use a one-offanimationvalue that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
Ref — https://tailwindcss.com/docs/animation#arbitrary-values
<div class="animate-[fall_3s_ease_100ms_infinite]">
<!-- Adding 100ms delay -->
</div>
<div class="animate-[fall_3s_ease_1s_infinite]">
<!-- Adding 1s delay -->
</div>2. TailwindCSS Plugin
Plugins let you register new styles for Tailwind to inject into the user’s stylesheet using JavaScript instead of CSS.
module.exports = {
plugin(({ matchUtilities, theme }) => {
//Add the css properties that you use in tailwind
matchUtilities({
'animation-delay': (value) => {
return {
'animation-delay': value,
};
},
});
}),
],
}Now we can introduce a delay before the animation starts using the animation-delay-[time] class.
<div className='animate-delay animation-delay-[1000ms]'>
<!-- Adding 1000ms delay -->
</div>Once we do this now we can create our complete animation.
const TypographyAnimation = () => {
const firstWord = 'develop';
const secondWord = 'design';
const renderWordAnimation = (word: string, startingDelay: number) => {
return word.split('').map((letter, index) => (
<span
key={index}
className={`animate-fall animation-delay-[${
startingDelay + index * 50
}ms] translate-y-[-150%]`}
>
{letter}
</span>
));
};
return (
<span className='relative inline-flex ml-2 overflow-hidden p-2'>
<div className='flex flex-row'>
{renderWordAnimation(firstWord, 0)}
</div>
<span className='absolute top-0 bottom-0'>
<div className='flex flex-row'>
{renderWordAnimation(secondWord, 1500)}
</div>
</span>
</span>
);
};JS Example -> https://codepen.io/Prayas-Lashkari/pen/RwqVzQN
