Splitting Text Animation With GSAP Library | splitterText

SplitterText is a small JavaScript library to create customizable text charges using the JavaScript GSAP animation library.

gsap text animation, gsap text reveal animation, gsap text animation on scroll, gsap split text examples, gsap stagger text, gsap splittext, text animation gsap

How to make use of it:

1. Load GSAP and the splitterText.js libraries within the doc.

<script src="/path/to/cdn/gsap.min.js"></script>
<script src="/path/to/cdn/splitterText.js"></script>

2. Assign a unique ID to your textual content.

<h1 id="title">CSS Script</h1>

3. Apply the splitting animation to the textual content.

  id: "title",
  containerclass: "mask",
  class: "splitterLetter",
  escape: " ",
  from: {
    x: "-110%",
    stagger: {
      from: "left",
      amount: 0.5,
  to: {
    duration: 1,
    x: "0px",
    stagger: {
      from: "left",
      amount: 0.5,

Fancy Splitting Text Animation With GSAP Library, splitterText Plugin/Github

See Demo And Download

Official Website(LorenzoDoremi): Click Here

This superior jQuery/javascript plugin is developed by LorenzoDoremi. For extra advanced usage, please go to the official website.

Related Posts


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…


Responsive Image Gallery & Lightbox Plugin using Bootstrap

Bootstrap Gallery With this script and Bootstrap 4, you can easily create an image gallery. You just have to put the thumbnails on the page. The BS Gallery…


Bootstrap 5 Floating Label Form Controls Library

A bootstrap floating label is a CSS / SCSS library that adds floating labels to Bootstrap 5 or Bootstrap 4 form controls such as input, text area,…