How to Code Your Own SplitText Plugin - GSAP🟢
Tags: javascript, gsap, animation, tutorial
Published: 2023-12-08 23:00:00

Version: 3.12.2

Hi everyone 👋, today I will show you how to code your own SplitText plugin to animate your characters/words/lines content and add personality in your animations to enhance your softwares. Let’s dive in !

## 1. License Terms

Before starting, please consider to read the [GSAP licenses](https://gsap.com/licensing/) and understand their applications in your personal/commercial projects. Simply, know that you can use all free plugins while getting paid only **one** end user per project, or you will need to get the commercial license(GSAP Business).

**Pros**✅
- Website, app, game delivered to one client
- Non-commercial/personal use

**Cons**⛔️
- Premium member software
- Template model sold on marketplace
- Micro-transaction fee

Here we will be under the Standard “No Charge” GreenSock License because it’s a non-commercial project.

## 2. Text VS SplitText Plugins

For those who want to benefit from GSAP extensions and save time, you can sign in/login to your [GSAP account](https://gsap.com/community/login/). You will unlock 8 plugins under the "No Charge" license and gain access to the **Text** plugin but not the SplitText !

_So what’s the difference?_

The Text plugin allows you to animate the **content** of the text by adding/removing some characters. The SplitText plugin allows you to animate each character/word/line one by one. If you want to use it directly for your purposes, you will need to register for the Premium License.

## 3. Problem Solving

The goal is to create one div per character (letter) and apply the GSAP props to it. Gsap target method uses `document.querySelectorAll()` so you can pass a single value, variable or even an array with multiple elements.

If you want to code this plugin on your own, I recommend it for a better understanding. The next schema will show you how:


![GSAP SplitText Schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tioi5aa8bgjw895wp78y.png)

## 4. The Code

Let's get started, firstly install the framework in your project folder with NPM in your Terminal.

```
npm install gsap
```

Next, go to the [installation page](https://gsap.com/docs/v3/Installation) and import GSAP at the top of your script.js:

```
import { gsap } from "gsap";
```

Now you have all basics to use GSAP syntax and create the SplitText plugin. I suggest you the script below:

{% codepen https://codepen.io/Paul-Mallet/pen/LYqamRp %}

As you can see, I select all characters and animate them with just 1 line of code thanks to the GSAP syntax: `gsap.method(target, { vars })`.

### Tips⚠️

_Why create div instead of span for each character?_
- Few browsers will not render CSS transform (scale, rotation...) on div, while it's recommended by GSAP because it's web-friendly
- Stagger special prop determines the time between each target animation (only work with multiple targets)

That’s it for this post, I hope it will help you in your daily work with GSAP and I wish you the best during your coding sessions 😁. Bye !

### Sources

[Basics to create animations with GSAP syntax](https://gsap.com/resources/get-started#creating-an-animation)
[GSAP Most Used Special Properties](https://gsap.com/resources/get-started#special-properties)