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 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. 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:
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 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:
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
GSAP Most Used Special Properties
Top comments (0)