Fancy Splitting Text Animation With GSAP Library – splitterText

Preview:

Description:

splitterText is a tiny JavaScript library to create a customizable splitting text animation using the gsap JavaScript animation library.

How to use it:

1. Load GSAP and the splitterText.js libraries in the document.

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

2. Assign a unique ID to your text.

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

3. Apply the splitting animation to the text.

• id: selector of text element
• containerclass: container class
• class: CSS class of text element
• escape: character to use for <br>
• from: GSAP animation object
• to: GSAP animation object

splitterText(  
  {
  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,
    },
  },
});