Enhancing UI With Staggered Text Animations
Published: 2024-07-12 10:36:16

 by [Ariochi Wuchegbule](https://blog.openreplay.com/authors/ariochi-wuchegbule)



<blockquote><em>
User interfaces are, at the core, a presentational unit of web applications as they communicate a web application's purpose to users, interact with users, and convey site functionalities. As such, there is a drive to make user interfaces simple, intuitive, and functional to drive user conversion rates. Staggered text animations provide extra interest to your page, as this article will show.
</em></blockquote>



<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>



Staggered text animations present a method of arranging texts on a web application to best convey the site’s key purpose and features and provide a structure for subheading content. Guiding the user observation means not overwhelming users with a lot of content simultaneously but rather presenting text in sequences in a carefully choreographed manner. This intentional delay, or stagger, in presenting UI elements can significantly impact the user's perception and interaction. In this article, we'll delve into the fascinating world of staggered animations, exploring how they enhance the overall user experience and contribute to creating more visually appealing and user-friendly interfaces.

## What are staggered animations?

The term staggered animation refers to a technique used in web design and multimedia presentations. In this technique, visual changes to UI elements happen in series, sometimes overlapping, to enhance design capabilities, add a feel of interactivity, and captivate the site audience. 

The purpose of staggered animation is to create a dynamic showcase of content in which the user is entranced, and their attention is guided to specific pieces of information, creating a sense of movement or progression that is visually appealing.

With staggered animations on individual elements, words, lines of text, or characters are made possible, and a delay is introduced between the appearance of each element, thereby creating a sequential or otherwise staggered presentation. 

Let's take a look at examples of some staggered animations:

!["Elva Design Group"](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/s_F9056328E04A36815F24E538421C1F6104DFE441574CB4A85F644B66A94CC7A7_1715161821436_SeeOurCapabilities-ElvaDesignGroup-ElvaDesignGroup-ezgif.com-video-to-gif-converter.gif)

![](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/s_F9056328E04A36815F24E538421C1F6104DFE441574CB4A85F644B66A94CC7A7_1715163487053_bandicam2024-05-0811-00-15-136-ezgif.com-video-to-gif-converter.gif)

In the GIF above, the site [Elva Design Group](https://www.helloelva.com/) uses staggered animations to display content on their page. Here the texts, and shapes are animated in a defined order, adding an aesthetic feel to the site. 

Staggered animations can also be assigned to specific site sections, such as side menus, as illustrated in the GIF below:

![Timothy Ricks](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/image.gif)

### What is a staggered text animation?

Staggered text animation refers to a form of staggered animation applied to text elements, which involves an intentional delay between the occurrence of individual characters, words, or lines of text. In this animation, a technique is used to animate text elements sequentially orchestrated, creating dynamic and engaging visual effects and resulting in a gradual or progressive appearance of the text.

### Applications and benefits of staggered animations

This section will discuss the benefits of using staggered animations on your web application and areas where its usage is more pronounced.

- More pronounced Call-to-Action (CTA) elements: Staggered animations can draw attention to important elements such as call-to-action buttons or links on a web application, encouraging users to take action and providing better conversions. With staggered animations, these site elements are more easily noticed when they come into the user’s viewport than non-animated CTA elements.
- Intuitive interfaces: Staggered animation can be applied as a core part of user interfaces to layer site content and provide digestible bits of information at their own pace and in manageable chunks. 
- User onboarding and tutorials: The user onboarding process and tutorial guide are best presented in measured bits containing simple animations to avoid overwhelming the user with too much information. Instead, an onboarding guide should introduce users step-by-step to key features and functionalities of the web application.
- Data visualization and infographics: These animations are particularly beneficial in the field of data visualization as they can be used to animate data points or chart elements sequentially, helping users focus on specific insights or trends. For instance, in bar charts and line graphs, with the bars appearing in sequence one after the other, the user can be guided along the course of the presentation, getting the desired information from the start of the data analysis to the current state, making complex information more accessible and engaging.
- Visual feedback and micro-interactions: SSite interactivity and visual feedback in response to user actions can be performed with staggered animations and provide an intuitive and responsive web application. Micro-interactions such as user clicks, swiping, tapping, or dragging are made more pronounced when an animation occurs to inform users of the successful completion or error occurrence based on their application and have been statistically proven to provide a positive user experience, a more user-friendly and engaging software product, and encourage users to revisit the application. A more profound use case of this application is in typing games, where visual cues are provided by the interface on what keys to press and feedback on key-down events.
- Brand identity and aesthetics: A site with staggered animation can instill a highly immersive and enjoyable experience in users. Such sites employ a unique presentation approach, embedding themselves in the user's memory and leveraging their satisfaction and cognitive remembrance to drive their usage and recommendations to a broader audience.
- Site accessibility refers to the methods used to ensure a web application considers the diverse needs of a wide audience. Implementing staggered animations, such as staggered texts, can help enhance readability, retain user attention, and provide visual cues and paced content, making it easy for users of different backgrounds. 
- Navigation and Menus: Staggered animations can serve as visual cues or signifiers to convey meaning and context within the interface. For example, animating the expansion of a drop-down menu or the collapse of an accordion panel provides visual feedback that communicates the action's outcome.

## Setting up dev dependencies

In this section, we will set up [Framer Motion](https://www.framer.com/motion/) in an existing web application project. For this installation, I will be making use of [Node.js](https://nodejs.org/en) and a command-line interface in my project directory:

```bash
# bash commands
npm install framer-motion
```

## Creating staggered text animations

In this section, we will create staggered text animations in a web application using Framer Motions.

### Animating text characters

Here, we will apply staggered animation to individual text characters, applying a delay and moving these characters a little at a time.

```jsx
"use client";
import React from "react";
import { motion } from "framer-motion";
const StaggeredAnimations = () => {
  // text to animate
  const firstText = "Welcome to Storytelling";

  //   to easily reuse the animation props
  const AnimationProps = {
    initial: { opacity: 0, y: 0 },
    animate: { opacity: 1, y: 20 },
 };
  return (
    <div>
      {/* staggered text animations */}
      {/* for screen readers */}
      <span className="sr-only">{firstText}</span>
      {/* for animation purposes and users */}
      {/* use the initial and animate states from AnimateProps */}
      <motion.span
        arial-hidden="true"
        className="text-8xl font-bold text-center"
        initial="initial"
        animate="animate"
        transition={{ staggerChildren: 0.1 }}
      >
        {/* render words */}
        {firstText.split(" ").map((word, index) => (
          <React.Fragment key={index}>
            {/* split and animate individual text  characters */}
            {word.split("").map((letter, index) => (
              <motion.span
                className="inline-block"
                key={index}
                variants={AnimationProps}
              >
                {letter}
              </motion.span>
 ))}
            {/* add space between words */}
            <motion.span
              className="inline-block"
              key={index}
              variants={AnimationProps}
            >
              &nbsp;
            </motion.span>
          </React.Fragment>
 ))}
      </motion.span>
    </div>
 );
};
export default StaggeredAnimations;
```

In the code block above, we created a variable `firstText` with the sentence "Welcome to Storytelling". In the code above, we will apply a stagger animation which moves every character along the y-axis. The animation uses `AnimationProps` as a property to specify the initial and final values of the animation. The `initial` value object specifies that the element starts from a value 0 of `opacity` and `y`, to a final value of 1 for `opacity` and 20 on the y-axis. 

In our component, we first created a `span` element meant for screen readers for accessibility purposes so that they only focus on the entire text with the class `sr-only`, as the other span with the stagger animation will cause a problem with screen readers. For the animation, we created another `span` element and added a property `arial-hidden` as true, to hide it from screen readers.

We used the `motion` component from Framer Motion and set an `initial` and `animate` state for the animation referencing the specified animation behavior in `AnimationProps`. We created two loops, with the first loop splitting the sentence variable `firstText` into words and the second loop splitting each word into individual characters. Finally, we set the `variants` property to use the defined animation properties and added a 0.1s delay between each animated child of the `motion.span` element, using `transition={{ staggerChildren: 0.1 }}`. Below is the output of this animation:

![](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/s_F9056328E04A36815F24E538421C1F6104DFE441574CB4A85F644B66A94CC7A7_1713788548826_bandicam2024-04-2210-22-29-002-ezgif.com-video-to-gif-converter.gif)


<CTA_Middle_Design />



### Triggering animations on page scroll

By default, animations occur on page load, regardless of whether the elements are in the viewport. To correct this, we will add a `ref` property to the element and only execute animations when the element is scrolled into view on the browser.

```jsx
"use client";
import React, { useRef } from "react";
import { motion, useInView } from "framer-motion";
const StaggeredAnimations = () => {
  // text to animate
  const firstText = "Welcome to Storytelling";
  const secondText = "We will love to tell your story";
  //   to easily reuse the animation props
  const AnimationProps = {
    initial: { opacity: 0, y: 0 },
    animate: { opacity: 1, y: 20 },
 };
  const ref = useRef(null);
  const viewPort = useInView(ref, {
    amount: 0.5,
 });
  return (
    <div>
      {/* staggered text animations */}
      {/* for screen readers */}
      {/* First text animation */}
 //...
      {/* second text */}
      <div className="h-screen">
        <span className="sr-only">{secondText}</span>
        <motion.span
          ref={ref}
          arial-hidden="true"
          className="text-8xl font-bold text-center"
          initial="initial"
          animate={viewPort ? "animate" : "initial"}
          transition={{ staggerChildren: 0.1 }}
        >
          {secondText.split(" ").map((word, index) => (
            <React.Fragment key={index}>
              {word.split("").map((letter, index) => (
                <motion.span
                  className="inline-block"
                  key={index}
                  variants={AnimationProps}
                >
                  {letter}
                </motion.span>
 ))}
              <motion.span
                className="inline-block"
                key={index}
                variants={AnimationProps}
              >
                &nbsp;
              </motion.span>
            </React.Fragment>
 ))}
        </motion.span>
      </div>
    </div>
 );
};
export default StaggeredAnimations;
```

In the code above, we import `useRef` from React, and `useInView` from Framer. We also have the variables `firstText` and `secondText` each containing strings. We created a variable `viewPort` which uses the Framer `useInView` hook and a `ref` to determine if half of the element (the specified `amount` of 0.5 stands for half of the element) has entered the viewport. Using the boolean state of this variable, we set the `animate` property of the `motion` component, as such the animation only starts when the element comes into view. 

Both animations performed on the `secondText` and `firstText` values make use of `AnimationProps` and change the values of `opacity` and `y`, the same as the previous section. Compared to the first animation, the second one only starts when the element is in the viewport due to the referenced `ref` value and the `useInView` hook in `viewPort` which we use as a condition for the `animate` property. If this value is false, it returns `initial` which returns the animation to the start values of the animation. When true, the animation is set to the `animate` property and the animation occurs.

![](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/s_F9056328E04A36815F24E538421C1F6104DFE441574CB4A85F644B66A94CC7A7_1713788611258_bandicam2024-04-2210-22-29-002-ezgif.com-video-to-gif-converter+1.gif)

### Staggering multiple sentences

In this section, we will apply stagger animations to different sentences in the same section and set their delay property so they appear in sequence rather than all at once within the viewport.

```jsx
// new sentence variable
const sitedescription = "Storytelling is the social and cultural activity of sharing stories, often with improvisation, theatrics, or embellishment. Stories or narratives have been shared in every culture as a means of entertainment, education, cultural preservation, and instilling moral values. Crucial elements of stories and storytelling include plot, characters, and narrative point of view.";
// animate property and delay for description
const AnimationDescription = {
  initial: { opacity: 0, y: 20 },
  animate: {
    opacity: 1,
    y: 0,
    transition: {
      delay: 3,
      type: "spring",
      stiffness: 120,
 },
 },
};
//...
<div className="h-screen">
  <span className="sr-only">{firstText}</span>
  {/* for animation purposes and users */}
  {/* use the initial and animate states from AnimateProps */}
  <motion.span
    arial-hidden="true"
    className="text-8xl font-bold text-center"
    initial="initial"
    animate="animate"
    transition={{ staggerChildren: 0.1 }}
  >
    {/* render words */}
    {firstText.split(" ").map((word, index) => (
      <React.Fragment key={index}>
        {/* split and animate individual text  characters */}
        {word.split("").map((letter, index) => (
          <motion.span
            className="inline-block"
            key={index}
            variants={AnimationProps}
          >
            {letter}
          </motion.span>
 ))}
        {/* add space between words */}
        <motion.span
          className="inline-block"
          key={index}
          variants={AnimationProps}
        >
          &nbsp;
        </motion.span>
      </React.Fragment>
 ))}
  </motion.span>
  {/* site description */}
  <motion.p
    className="text-left text-xl w-1/2 mt-16"
    initial="initial"
    animate="animate"
    aria-hidden="true"
    variants={AnimationDescription}
  >
    {sitedescription}
  </motion.p>
</div>;
{
  /* second text */
}
//...
```

Here, we have the `firstText` animation we created in the previous section, which splits each character of every word and animates its `opacity` and y-axis value with the property `AnimationProps`. We created a new variable, `sitedescription` and animation property `AnimationDescription`. For this animation, we started by specifying initial values of `0` for opacity and 20 for `y`, and a final value of `1` for opacity and `0` for y.

Also, we added a delay of 3 seconds and made use the type `spring` with a `stiffness` of 120. This makes the animation behave like a spring streching passed its intended position on the y-axis and then returning to the y-axis value of 0. This new animation is attached to the `paragraph` element and here, the entire text is animated at the same time unlike the first animation where we animate individual letters on the y-axis.

![](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/s_F9056328E04A36815F24E538421C1F6104DFE441574CB4A85F644B66A94CC7A7_1713788726285_bandicam2024-04-2210-58-01-222-ezgif.com-video-to-gif-converter.gif)

### Creating loops with animation control

In this section, we will integrate controls into our animations and also learn how best animation start and end events can be handled.

```jsx
const controls = useAnimation();
const viewPort = useInView(ref, {
  amount: 0.5,
});
useEffect(() => {
  let timeout: NodeJS.Timeout;
  const showText = () => {
    controls.start("animate");
    timeout = setTimeout(async () => {
      // waut to complete the animation
      await controls.start("initial");
      // reset the animation
      controls.start("animate");
 }, 10000);
 };
  if (viewPort) {
    showText();
 }
  if (!viewPort) {
    controls.start("initial");
 }
  return () => {
    clearTimeout(timeout);
 };
}, [viewPort]);

//...
<div className="h-screen">
  <span className="sr-only">{secondText}</span>
  <motion.span
    ref={ref}
    arial-hidden="true"
    className="text-8xl font-bold text-center"
    initial="initial"
    animate={controls}
    variants={{
      animate: {
        transition: {
          staggerChildren: 0.1,
 },
 },
      initial: {},
 }}
  >
    {secondText.split(" ").map((word, index) => (
      <React.Fragment key={index}>
        {word.split("").map((letter, index) => (
          <motion.span
            className="inline-block"
            key={index}
            variants={AnimationProps}
          >
            {letter}
          </motion.span>
 ))}
        <motion.span
          className="inline-block"
          key={index}
          variants={AnimationProps}
        >
          &nbsp;
        </motion.span>
      </React.Fragment>
 ))}
  </motion.span>
</div>
```

In the code block above, we first created a variable `controls` which uses the Framer `useAnimation()` hook. Using this hook we will detect if an element with the `ref` property has entered the viewport and also added a repeat for the animation using `setTimeout`. When the element with the `ref` enters the viewport, we call a function `showText()`. In this function, we start the animation with `controls.start("animate")` and run asynchronous function to repeat the animation. The reason for this `async` function is to ensure that the animation states do not overlap and the animation repeats only after the `initial` state has been completed.

Everytime there is a change in `viewPort`, the `useEffect` hook checks if the element is in view and executes the animation if true. The animation is also set to repeat after a delay of 10 seconds.

![](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/s_F9056328E04A36815F24E538421C1F6104DFE441574CB4A85F644B66A94CC7A7_1713789297828_bandicam2024-04-2213-31-42-942-ezgif.com-video-to-gif-converter.gif)

### Building a landing section with staggered animations

In this section, we will create a landing section and use staggered animation to choreograph the presentation of site content. First, we will create a navigation component, `Nav.tsx`, and add the following code to it:

```jsx
"use client";
import { motion } from "framer-motion";
import React from "react";
const Nav = () => {
  return (
    <div className="w-full flex justify-center">
      <motion.div
        className="w-4/5 bg-white text-slate-900 font-medium flex justify-between items-center px-6 py-3 rounded-2xl mt-12"
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <h1>Storytelling</h1>
        <div className="flex space-x-4 items-center">
          <a href="#" className="hover:text-slate-900">
 Home
          </a>
          <a href="#" className="hover:text-slate-900">
 About
          </a>
          <a href="#" className="hover:text-slate-900">
 Services
          </a>
          <a href="#" className="hover:text-slate-900">
 Contact
          </a>
          {/* cta */}
          <button className="bg-slate-900 text-white px-4 py-2 rounded-md">
 Get Started
          </button>
        </div>
      </motion.div>
    </div>
 );
};
export default Nav;
```

This component uses the Framer `motion` component to animate the element along the y-axis on page load. Here, we have a `div` which will serve as a navigation bar, and we are using the `motion` component to animate this container on the y-axis from an initial value of -100 to 0 using the `initial` and `animate` props, and within a `duration` of 0.5 seconds. We also have four anchor elements and a button for the nav menu.

Next, we will create a call-to-action component for the buttons called `CTA.tsx`:

```jsx
"use client";
import React from "react";
import { motion } from "framer-motion";
const Ctas = () => {
  return (
    <div className="flex items-center gap-4 mt-12">
      <motion.button
        className="bg-white text-slate-900 px-4 py-2 rounded-md"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 4.3 }}
      >
 Get Started
      </motion.button>
      <motion.button
        className="border-white border text-slat-900 px-4 py-2 rounded-md"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 4.8 }}
      >
 Learn More
      </motion.button>
    </div>
 );
};
export default Ctas;
```

In the code block above, we have two buttons that use the `motion` component. For both buttons, the `opacity` values change from an initial `opacity` of 0 to a final value of 1. The animation runs for a second and starts after a specified delay. We have a specified animation `duration` and a `delay` to make the buttons appear one after the other. 

In the `StaggeredAnimations.tsx` component, make the following changes:

```jsx
"use client";
import React, { useEffect, useRef } from "react";
import { motion, useAnimation, useInView } from "framer-motion";
import Ctas from "./Ctas";
const StaggeredAnimations = () => {
  //... variables and functions
  return (
    <div>
      {/* staggered text animations */}
      {/* for screen readers */}
      <div className="h-full flex flex-col items-center gap-8">
 //...
        <Ctas />
      </div>
    </div>
 );
};
export default StaggeredAnimations;
```

Here, we have added the call-to-action component `Ctas` within the `StaggeredAnimations` component, after the staggered text animations we created at the start of this article, present in the file. This way, the buttons come after the hero texts on the landing section.

Finally, we will return the `Nav` and `StaggeredAnimations.tsx` components in the root page of our application:

```jsx
import Nav from "@/components/Nav";
import StaggeredAnimations from "@/components/StaggeredAnimations";
export default function Home() {
  return (
    <main className="flex flex-col items-center justify-between px-24">
      <Nav />
      <StaggeredAnimations />
    </main>
 );
}
```

In the code above, we added the `Nav` and `StaggeredAnimations` components to a `main` element tag and added some styles to display the components in a flex-box. Now, if we run the application, we will get the following results:

![](https://blog.openreplay.com/images/staggered-text-animations-with-framer/images/s_F9056328E04A36815F24E538421C1F6104DFE441574CB4A85F644B66A94CC7A7_1713789379947_bandicam2024-04-2213-15-15-208-ezgif.com-video-to-gif-converter.gif)

## Conclusion

Hurray, you’ve made it to the end of this article! In this article, we covered the concept of staggered animations, delving into its applications and benefits, and also discussed code approaches to staggered animation in a web application using Framer Motions.