Fancy Splitting Text Animation With GSAP Library – splitterText

Category: Animation , Javascript | July 5, 2021
Author:LorenzoDoremi
Views Total:144 views
Official Page:Go to website
Last Update:July 5, 2021
License:MIT

Preview:

Fancy Splitting Text Animation With GSAP Library – splitterText

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

You Might Be Interested In:


Leave a Reply