DEV Community

Youssef Benghazy
Youssef Benghazy

Posted on

How to Add Modern Text Animations to Your Website with SplitFX

#javascript #webdev #tutorial #frontend

In this tutorial, I'll show you how to add the modern text animations shown in the cover video to your website using SplitFX , a JavaScript plugin for splitting and animating text.

You'll learn how to create a sequential hero heading and animate section titles as they enter the viewport with just a few lines of JavaScript.

🔗 Live Demo & More Examples: Explore SplitFX Demo Projects

1. Install SplitFX

Option A: Via npm 

npm install @tanglat/splitfx
Enter fullscreen mode Exit fullscreen mode

Then import it into your project:

import SplitFX from "@tanglat/splitfx";
Enter fullscreen mode Exit fullscreen mode

Option B: Via CDN

Include the CDN script below. It makes SplitFX available globally, so you can use it directly in your JavaScript:

<script src="https://cdn.jsdelivr.net/npm/@tanglat/splitfx@1/dist/umd/splitfx.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

2. Animate Section Titles on Scroll

We'll start by animating each section title as it enters the viewport.

Step 1 — Select the section titles to animate 

const sectionTitles = document.querySelectorAll(".section .title");
Enter fullscreen mode Exit fullscreen mode

Step 2 — Create a SplitFX instance with your animation config

Create a SplitFX instance to define how the text should animate. We'll use the same instance to animate every section title.

const textAnimator = new SplitFX({
  in: {
    mode: "chars",
    includeSpaces: true,
    animation: "fadeRight",
    duration: 1000,
    stagger: 40
  },
  out: {
    mode: "words",
    duration: 0,
    stagger: 0
  }
});
Enter fullscreen mode Exit fullscreen mode

Looking for a different effect? Browse the SplitFX Demos to preview and copy ready-to-use configurations, or use SplitFX Studio to create and customize your own.

Step 3 — Animate each title's text as it scrolls into view

Finally, call animateOnScroll() for each title. The animation will automatically start when the element enters the viewport.

sectionTitles.forEach(title => {
  textAnimator.animateOnScroll(title, { repeat: false, observerOptions: { threshold: 1 } });
});
Enter fullscreen mode Exit fullscreen mode

That's it! Every section title now animates automatically the first time it enters the viewport.

3. Create a Sequential Hero Text Animation

We'll now recreate the animated hero heading shown at the top of the landing page. The heading cycles through multiple messages, each with its own animation.

Step 1 — Select the HTML element to animate 

const heroTitle = document.querySelector(".hero .title");
Enter fullscreen mode Exit fullscreen mode

Step 2 — Create the animation steps

Create an array describing each step in the sequence. Each step defines:

  • The content to display.
  • How the content animates in.
  • How the content animates out. 
const steps = [
  // Step 1
  {
    content:
      "<span style='color: #F65C1B'>Build</span> &amp; <span style='color: #F65C1B'>Deploy</span> Smarter AI Agents in Minutes.",
    allowHTML: true,

    in: {
      mode: "chars",
      includeSpaces: false,
      animation: "rotateTopRight",
      duration: 500,
      easing: "linear",
      stagger: 50,
      staggerDir: "alternate",
      delay: 0
    },

    out: { // `out` accepts the same options as `in`, and any omitted `out` option inherits the corresponding `in` value.
      delay: 3000 // Delay before "out" content stays visible for this duration after animating in and before animating out.
    }
  },

  // Step 2
  {
    content:
      "Turn Simple Prompts into <span style='color: #F65C1B'>Powerful</span> Automation.",
    allowHTML: true,

    in: {
      mode: "chars",
      includeSpaces: true,
      animation: "fadeTop",
      duration: 300,
      easing: "linear",
      stagger: 50,
      staggerDir: "random",
      delay: 0
    },

    out: {
      delay: 3000
    }
  },

  // Step 3
  {
    content:
      "<span style='color: #F65C1B'>Automate</span> Your Business. <span style='color: #F65C1B'>Scale</span> Without Limits.",
    allowHTML: true,

    in: {
      mode: "chars",
      includeSpaces: true,
      animation: "rotateRight",
      duration: 500,
      easing: "steps(2)",
      stagger: 50,
      staggerDir: "forward",
      delay: 0
    },

    out: {
      delay: 3000
    }
  }
];
Enter fullscreen mode Exit fullscreen mode

Note: out accepts the same options as in, and any omitted out option inherits the corresponding in value.

Step 3 — Apply the steps with animateSequence

Finally, call SplitFX.animateSequence() — a static method that runs a sequence of text animations inside an HTML element.

SplitFX.animateSequence(heroTitle, steps, { repeat: "infinite" });
Enter fullscreen mode Exit fullscreen mode

That's it! The hero heading will now cycle through each message and repeat the sequence indefinitely.

Learn More

Want to explore more animation presets, configuration options, interactive demos, and the complete documentation? Visit the SplitFX website.

Top comments (0)