How to create text stagger animation using TypographyMotion plugin ?
Last Updated :
15 Jul, 2025
In this article, we will learn how to create text stagger animation using TypographyMotion plugin. This plugin is completely based on HTML, CSS, and JavaScript. This is one of the multiple animation techniques which encourages incremental delay from one state to another giving nice visual interactive applications.
Note: Please download the TypographyMotion plugin in the working folder and include the required files in the head section of your HTML code.
<link href=”https://use.typekit.net/lwc3axy.css%E2%80%9D rel=”stylesheet” type=”text/css”/>
<link href=”base.98fd6c19.css” rel=”stylesheet” type=”text/css”/>
<link href=”js.00a46daa.css” rel=”stylesheet” type=”text/css”/>
<script src=”https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js%E2%80%9D></script>
Example: The following example demonstrates the TypographyMotion plugin helping developers to create stagger text animation. Different HTML elements like section, figure, circle, and SVG are used to develop the structure of the web page. Different classes from the plugin's CSS file are used for visual effects of content, frame, paragraph, and cursor as shown in the below code. After moving the cursor on the About and Close "span" frames, the user can see the text stagger animation of the HTML paragraph. Refer to the output for a better understanding.
html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta name="description" content="Letter stagger animation" />
<link rel="stylesheet"
href="https://use.typekit.net/lwc3axy.css" />
<link rel="stylesheet"
type="text/css" href="base.98fd6c19.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">
</script>
<link rel="stylesheet" href="js.00a46daa.css" />
</head>
<body class="loading">
<main>
<div class="frame">
<a class="frame__home">
<span class="frame__home-title">
Home
</span>
</a>
<div class="frame__title-wrap">
<h1 class="frame__title">
Staggered text Motion Effect
</h1>
</div>
<a class="frame__about">
<span class=
"frame__about-item frame__about-item--current">
About</span>
<span class="frame__about-item">
Close
</span>
</a>
</div>
<div class="content">
<section class=
"content__item content__item--home content__item--current">
<p class="content__paragraph
content__paragraph--large content__paragraph--first"
data-splitting="">
HTML is a markup language
</p>
<p class=
"content__paragraph content__paragraph--large
content__paragraph--right content__paragraph--last"
data-splitting="">
that is used by the browser
to manipulate text.
</p>
</section>
<section class="content__item content__item--about">
<p class="content__paragraph"
data-splitting=""><b>HTML</b>
stands for</p>
<p class=
"content__paragraph content__paragraph--right" data-splitting="">
Hyper Text Markup Language
</p>
<p class="content__paragraph" data-splitting="">
It defines link between
</p>
<p class="content__paragraph" data-splitting="">
Web pages
</p>
<figure class="content__figure">
<img class="content__figure-img"
src="background2.JPG" alt="background2 image" />
<figcaption class="content__figure-caption">
Markup language is used to define
the text document within tag which
defines the structure of web pages.
This language is used to make notes
for the computer text so that a
machine can understand it and
manipulate text accordingly.
Most of markup languages are human
readable. Language uses tags to define
what manipulation has to be done on
the text.
</figcaption>
</figure>
</section>
</div>
</main>
<svg class="cursor" width="90" height="90"
viewBox="0 0 90 90">
<circle class="cursor__inner" cx="40"
cy="40" r="20">
</circle>
</svg>
<script src="js.00a46daa.js"></script>
</body>
</html>
Output:
Similar Reads
How to Create Text Animation Effect using JavaScript ? Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a
2 min read
Text Animation using SVG Image What is SVG?SVG stands for Scalable Vector Graphics. It is an image format based on XML. It creates different geometric shapes that can be combined to make two-dimensional graphics.We are going to use an SVG image to create a text animation effect. The SVG images can be downloaded from the internet
15+ min read
Text Animation using SVG Image What is SVG?SVG stands for Scalable Vector Graphics. It is an image format based on XML. It creates different geometric shapes that can be combined to make two-dimensional graphics.We are going to use an SVG image to create a text animation effect. The SVG images can be downloaded from the internet
15+ min read
How to Create a Curve Text using CSS/Canvas ? Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG,
3 min read
How to Create a Curve Text using CSS/Canvas ? Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG,
3 min read
How to Create a Curve Text using CSS/Canvas ? Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG,
3 min read