Text Split Effect

About this module

Headline characters spring in sequentially, wrapped in spans by GSAP's SplitText-style manual split.

Installation

1. 1

   Install GSAP

   Install the animation library with your package manager.

   npm install gsap

2. 2

   Create the files

   Create `index.html`, `style.css` and `script.js` in the same folder.

3. 3

   Paste the code

   Copy each file's source into its matching file.

4. 4

   Run it

   Open `index.html` (or import the logic into your bundler setup).

Usage

1. 1

   Copy the HTML

   Paste the markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
   <script src="script.js"></script>
   <h1 class="mh-split-title">Harbor</h1>

2. 2

   Paste the script

   Include `script.js` after GSAP.

   const title = document.querySelector(".mh-split-title");
   const text = title.textContent;
   title.innerHTML = [...text].map((c) => '<span class="mh-char">' + c + "</span>").join("");
   gsap.to(".mh-char", {
     opacity: 1,
     y: 0,
     rotate: 0,
     scale: 1,
     duration: 0.5,
     ease: "back.out(2)",
     stagger: 0.06,
     delay: 0.2,
   });
   gsap.set(".mh-char", { y: 60, rotate: 8, scale: 0.7 });