Documentation v1.0.0

Text Animations

---
title: Text Animations
description: Text animation components are dynamic UI elements that bring motion and interactivity to text.
toc: true
---

### Typer

Typer creates a realistic typing effect using the [Typed.js](https://mattboldt.com/demos/typed-js/) library. Perfect for hero sections, landing pages, or anywhere you'd like to draw attention to key messages.

You can include the library using the following CDN link:

```html
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js"></script>
```

#### Initialization

Use the following script to configure Typed.js:

```js
// Wait for the DOM to be ready before running the script
document.addEventListener('DOMContentLoaded', function () {
  // Select all elements with the class 'typer'
  const typers = document.querySelectorAll('.typer');

typers.forEach(function (typer) {
    // Get the configuration values from data attributes
    const typeSpeed = typer.getAttribute('data-type-speed') || 50;
    const backSpeed = typer.getAttribute('data-back-speed') || 50;
    const strings = typer.getAttribute('data-strings') ? typer.getAttribute('data-strings').split(',') : [];
    const loop = typer.getAttribute('data-loop') === 'true';

// Initialize the Typed.js instance with the custom options
    new Typed(typer.querySelector('.text-primary'), {
      strings: strings,
      typeSpeed: parseInt(typeSpeed, 10),
      backSpeed: parseInt(backSpeed, 10),
      loop: loop,
      backDelay: 1000 // Add a slight delay before the text starts backspacing
    });
  });
});
```

#### How to Use in HTML

To use Typed.js on an element, follow this structure:

```html
<div class="typer" data-strings="Hello,World!" data-type-speed="60" data-back-speed="40" data-loop="true">
  <span class="text-primary"></span>
</div>
```

### Basic example

Configure typing speed with `data-type-speed`, backspace speed with `data-back-speed`, and multiple strings with `data-strings` (comma-separated). Set `data-loop="false"` to type once or `data-loop="true"` for continuous cycling.

<Example html={`<h2 class="typer" data-type-speed="50" data-back-speed="50" data-loop="false" data-strings="modern design,clean code,seamless integration">
    Front theme is a powerful theme with <span id="example" class="text-primary"></span>
  </h2>`}
js={`// Wait for the DOM to be ready before running the script
document.addEventListener('DOMContentLoaded', function () {
// Select all elements with the class 'typer'
const typers = document.querySelectorAll('.typer')

typers.forEach(function (typer) {
// Get the configuration values from data attributes
const typeSpeed = typer.getAttribute('data-type-speed') || 50
const backSpeed = typer.getAttribute('data-back-speed') || 50
const strings = typer.getAttribute('data-strings')
? typer.getAttribute('data-strings').split(',')
: []
const loop = typer.getAttribute('data-loop') === 'true'

// Initialize the Typed.js instance with the custom options
    new Typed(typer.querySelector('.text-primary'), {
    strings: strings,
    typeSpeed: parseInt(typeSpeed, 10),
    backSpeed: parseInt(backSpeed, 10),
    loop: loop,
    backDelay: 1000 // Add a slight delay before the text starts backspacing
    })

})
})`} />

### Typer with loop

A continuous version of the typing effect that cycles through multiple phrases. The text types out completely, pauses briefly, then backspaces and starts the next phrase. Ideal for showcasing multiple features, benefits, or concepts in a dynamic way. The loop creates an engaging, ever-changing message that keeps users' attention.

<Example
  html={`<h2 class="typer" data-type-speed="70" data-back-speed="30" data-loop="true" data-strings="scalability,design,customization">
  This framework is built for <span id="example-2" class="text-primary"></span>
</h2>`}
/>

### Text fade

Smooth fade transitions between different text phrases. Each text string appears with a gentle fade-in effect, remains visible for a few seconds, then fades out before the next string appears. This creates a subtle, elegant way to cycle through multiple messages without the mechanical feel of typing effects. Perfect for testimonials, feature highlights, or rotating taglines.

<Example html={`<h2>
    Front theme is a powerful theme with <span class="text-primary ms-2">
      <span class="fade-animation">flexibility</span>
      <span class="fade-animation">speed</span>
      <span class="fade-animation">clean code</span>
    </span>
  </h2>`}
js={`const texts = document.querySelectorAll('.fade-animation');
let currentIndex = 0;

function fadeText() {
// Reset all texts to be hidden
texts.forEach(text => text.classList.remove('active'));

// Show the current text with the fade-in effect
texts[currentIndex].classList.add('active');

// Move to the next index for the next iteration
currentIndex = (currentIndex + 1) % texts.length;
}

// Start the fade-in/fade-out cycle every 3 seconds
setInterval(fadeText, 3000);

// Initial fade-in for the first text
fadeText();`} />

### Slide Text

Text slides in from the left side of the container, creating a dynamic entrance effect. Uses CSS transforms and animations for smooth motion. Great for revealing important information or creating visual interest when content loads. The sliding motion draws the eye and creates a sense of movement and energy on the page.

<Example html={`<h2 class="slide-text-container">
  Experience the power of <span class="text-primary slide-text">innovation</span>
</h2>`}
css={`.slide-text-container {
  overflow: hidden;
}

.slide-text {
display: inline-block;
transform: translateX(-100%);
animation: slideIn 2s ease-out forwards;
}

@keyframes slideIn {
to {
transform: translateX(0);
}
}
`}
js={`// Restart animation on page load
document.addEventListener('DOMContentLoaded', function() {
const slideText = document.querySelector('.slide-text');
if (slideText) {
slideText.style.animation = 'none';
slideText.offsetHeight; // Trigger reflow
slideText.style.animation = 'slideIn 2s ease-out forwards';
}
});`} />

### Bounce Text

Text appears with a playful bounce effect, starting small and scaling up with a slight overshoot before settling into place. This animation adds personality and energy to your content, making it feel more dynamic and engaging. Perfect for call-to-action text, announcements, or any content that should feel exciting and energetic.

<Example html={`<h2>
  Get ready for <span class="text-primary bounce-text">amazing results</span>
</h2>`}
css={`.bounce-text {
  display: inline-block;
  animation: bounceIn 1.5s ease-out;
}

@keyframes bounceIn {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}`}
js={`// Restart animation on page load
document.addEventListener('DOMContentLoaded', function() {
const bounceText = document.querySelector('.bounce-text');
if (bounceText) {
bounceText.style.animation = 'none';
bounceText.offsetHeight; // Trigger reflow
bounceText.style.animation = 'bounceIn 1.5s ease-out';
}
});`} />

### Character Reveal

Each character appears individually with a staggered animation, creating a wave-like reveal effect across the text. Characters slide up from below while fading in, with each letter delayed slightly from the previous one. This creates an elegant, sophisticated animation that's perfect for headlines, important announcements, or any text that deserves special attention.

<Example html={`<h2>
  Discover the <span class="text-primary char-reveal">future of web development</span>
</h2>`}
css={`.char-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: revealChar 0.6s ease-out forwards;
}

@keyframes revealChar {
to {
opacity: 1;
transform: translateY(0);
}
}`}
js={`document.addEventListener('DOMContentLoaded', function() {
const charRevealElement = document.querySelector('.char-reveal');
if (charRevealElement) {
const text = charRevealElement.textContent;
charRevealElement.innerHTML = '';

text.split('').forEach((char, index) => {
      const span = document.createElement('span');
      span.className = 'char';
      span.textContent = char === ' ' ? ' ' : char; // Use non-breaking space
      span.style.animationDelay = (index * 0.05) + 's';
      charRevealElement.appendChild(span);
    });

}
});`} />

### Glow Text

Text pulses with a glowing effect that alternates between subtle and intense illumination. Uses CSS text-shadow to create the glow effect, which continuously animates to draw attention. Perfect for highlighting special offers, important announcements, or creating a futuristic, high-tech aesthetic. The glow effect works especially well with primary or accent colors.

<Example html={`<h2>
  <span class="text-primary glow-text">Illuminate your ideas</span>
</h2>`}
css={`.glow-text {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
from {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
to {
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor;
}
}`} />

Text animation components are dynamic UI elements that bring motion and interactivity to text.

Typer

Typer creates a realistic typing effect using the Typed.js library. Perfect for hero sections, landing pages, or anywhere you'd like to draw attention to key messages.

You can include the library using the following CDN link:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js"></script>

Initialization

Use the following script to configure Typed.js:

// Wait for the DOM to be ready before running the script
document.addEventListener('DOMContentLoaded', function () {
  // Select all elements with the class 'typer'
  const typers = document.querySelectorAll('.typer');

  typers.forEach(function (typer) {
    // Get the configuration values from data attributes
    const typeSpeed = typer.getAttribute('data-type-speed') || 50;
    const backSpeed = typer.getAttribute('data-back-speed') || 50;
    const strings = typer.getAttribute('data-strings') ? typer.getAttribute('data-strings').split(',') : [];
    const loop = typer.getAttribute('data-loop') === 'true';

    // Initialize the Typed.js instance with the custom options
    new Typed(typer.querySelector('.text-primary'), {
      strings: strings,
      typeSpeed: parseInt(typeSpeed, 10),
      backSpeed: parseInt(backSpeed, 10),
      loop: loop,
      backDelay: 1000 // Add a slight delay before the text starts backspacing
    });
  });
});

How to Use in HTML

To use Typed.js on an element, follow this structure:

<div class="typer" data-strings="Hello,World!" data-type-speed="60" data-back-speed="40" data-loop="true">
  <span class="text-primary"></span>
</div>

Basic example

Configure typing speed with data-type-speed, backspace speed with data-back-speed, and multiple strings with data-strings (comma-separated). Set data-loop="false" to type once or data-loop="true" for continuous cycling.

Front theme is a powerful theme with

<h2 class="typer" data-type-speed="50" data-back-speed="50" data-loop="false" data-strings="modern design,clean code,seamless integration">
  Front theme is a powerful theme with <span id="example" class="text-primary"></span>
</h2>

// Wait for the DOM to be ready before running the script
document.addEventListener('DOMContentLoaded', function () {
// Select all elements with the class 'typer'
const typers = document.querySelectorAll('.typer')

typers.forEach(function (typer) {
// Get the configuration values from data attributes
const typeSpeed = typer.getAttribute('data-type-speed') || 50
const backSpeed = typer.getAttribute('data-back-speed') || 50
const strings = typer.getAttribute('data-strings')
? typer.getAttribute('data-strings').split(',')
: []
const loop = typer.getAttribute('data-loop') === 'true'

  // Initialize the Typed.js instance with the custom options
  new Typed(typer.querySelector('.text-primary'), {
  strings: strings,
  typeSpeed: parseInt(typeSpeed, 10),
  backSpeed: parseInt(backSpeed, 10),
  loop: loop,
  backDelay: 1000 // Add a slight delay before the text starts backspacing
  })

})
})

Typer with loop

This framework is built for

<h2 class="typer" data-type-speed="70" data-back-speed="30" data-loop="true" data-strings="scalability,design,customization">
This framework is built for <span id="example-2" class="text-primary"></span>
</h2>

Text fade

Front theme is a powerful theme with flexibility speed clean code

<h2>
  Front theme is a powerful theme with <span class="text-primary ms-2">
    <span class="fade-animation">flexibility</span>
    <span class="fade-animation">speed</span>
    <span class="fade-animation">clean code</span>
  </span>
</h2>

const texts = document.querySelectorAll('.fade-animation');
let currentIndex = 0;

function fadeText() {
// Reset all texts to be hidden
texts.forEach(text => text.classList.remove('active'));

// Show the current text with the fade-in effect
texts[currentIndex].classList.add('active');

// Move to the next index for the next iteration
currentIndex = (currentIndex + 1) % texts.length;
}

// Start the fade-in/fade-out cycle every 3 seconds
setInterval(fadeText, 3000);

// Initial fade-in for the first text
fadeText();

Slide Text

Experience the power of innovation

<h2 class="slide-text-container">
Experience the power of <span class="text-primary slide-text">innovation</span>
</h2>

.slide-text-container {
overflow: hidden;
}

.slide-text {
display: inline-block;
transform: translateX(-100%);
animation: slideIn 2s ease-out forwards;
}

@keyframes slideIn {
to {
transform: translateX(0);
}
}

// Restart animation on page load
document.addEventListener('DOMContentLoaded', function() {
const slideText = document.querySelector('.slide-text');
if (slideText) {
slideText.style.animation = 'none';
slideText.offsetHeight; // Trigger reflow
slideText.style.animation = 'slideIn 2s ease-out forwards';
}
});

Bounce Text

Get ready for amazing results

<h2>
Get ready for <span class="text-primary bounce-text">amazing results</span>
</h2>

.bounce-text {
display: inline-block;
animation: bounceIn 1.5s ease-out;
}

@keyframes bounceIn {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}

// Restart animation on page load
document.addEventListener('DOMContentLoaded', function() {
const bounceText = document.querySelector('.bounce-text');
if (bounceText) {
bounceText.style.animation = 'none';
bounceText.offsetHeight; // Trigger reflow
bounceText.style.animation = 'bounceIn 1.5s ease-out';
}
});

Character Reveal

Discover the future of web development

<h2>
Discover the <span class="text-primary char-reveal">future of web development</span>
</h2>

.char-reveal .char {
display: inline-block;
opacity: 0;
transform: translateY(20px);
animation: revealChar 0.6s ease-out forwards;
}

@keyframes revealChar {
to {
opacity: 1;
transform: translateY(0);
}
}

document.addEventListener('DOMContentLoaded', function() {
const charRevealElement = document.querySelector('.char-reveal');
if (charRevealElement) {
const text = charRevealElement.textContent;
charRevealElement.innerHTML = '';

  text.split('').forEach((char, index) => {
    const span = document.createElement('span');
    span.className = 'char';
    span.textContent = char === ' ' ? ' ' : char; // Use non-breaking space
    span.style.animationDelay = (index * 0.05) + 's';
    charRevealElement.appendChild(span);
  });

}
});

Glow Text

Illuminate your ideas

<h2>
<span class="text-primary glow-text">Illuminate your ideas</span>
</h2>

.glow-text {
animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
from {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
to {
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor;
}
}

On this page