How to Add Modern Text Animations to Your Website with SplitFX

Youssef Benghazy — Sun, 09 Aug 2026 23:16:36 +0000

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

Then import it into your project:

import SplitFX from "@tanglat/splitfx";

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>

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");

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
  }
});

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 } });
});

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");

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
    }
  }
];

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" });

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.

DEV Community: Youssef Benghazy