Press "Enter" to skip to content

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.

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

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *