Web Development
Create Staggered Text Animation with Tailwind CSS and React
Today, let's explore how to recreate one of Linear's captivating hero section animations: the staggered text animation.
Setting up a Vite React app with Tailwind CSS
First, we create a Vite React app using the command npx create vite app, selecting React as the library. Follow the official Tailwind CSS documentation to set up Tailwind in the project. It involves six straightforward steps.
Start the development server with npm run dev. You should see your app running on localhost:5173.
You can choose to use Next.js or Remix as alternatives to Vite.
Generating the markup
The default markup in a Vite React app is a far cry from Linear's hero section and hand coding will take a lot of time.
Thankfully, we have AI to get us 80% of the way there without all that work.
Starting with this mockup in Figma, I used the Builder.io Figma plugin to convert the design into React + Tailwind code using Visual Copilot.
Simply click Generate in Figma, then copy and paste the generated code into your codebase.
I placed it in a new file named Hero.tsx.
Adding the slide-in animation
To enhance Tailwind's animation capabilities, modify theme.extend.animation and theme.extend.keyframes in the tailwind.config.js file:
This code snippet defines a new slidein animation. The from keyframe starts with the content at 0% opacity and slightly above its final position, while the to keyframe completes the animation at 100% opacity and its final position.
The animation lasts 1 second with an ‘ease’ timing-function and a 300ms delay.
Apply this animation to each of the four elements representing the hero text in Hero.tsx:
The animation runs but all the elements slide in at once. To create a staggered effect, we introduce different delays for each element by defining four variants of the slidein animation in Tailwind's configuration:
Update the Hero component's classNames to reflect these new animation variants:
This introduces code duplication, but we'll address that shortly.
Now, our animations stagger beautifully, but there's an issue: the elements are visible before the animation starts. To fix this, add an opacity-0 class to ensure they're hidden initially:
The staggered animation works perfectly. However, post-animation, the hero text elements all disappear. To fix this, we specify animation-fill-mode: forwards so the elements maintain their final keyframe styles:
Our animations stagger beautifully as expected.
Refactoring with CSS variables for delay
To optimize our code, let's refactor our custom animations using CSS variables. We introduce a --slidein-delay variable with a default value of 0ms:
We then apply this variable to our Hero component:
And there you have it — a sleek staggered text animation similar to Linear's landing page, achieved using React and Tailwind CSS.
Share
