GSAP – Play SplitText Animation on Viewport

Here is a code to play split text animation on a text with the class “.split-text” whenever it is visible in the viewport.

// Play SplitText Animation on Viewport
function playAnimation() {
  var tl = gsap.timeline(),
    mySplitText = new SplitText(".split-text", { type: "words,chars" }),
    chars = mySplitText.chars; //an array of all the divs that wrap each character

  gsap.set(".split-text", { perspective: 400 });

  tl.from(chars, {
    duration: 0.8,
    opacity: 0,
    scale: 0,
    y: 80,
    rotationX: 180,
    transformOrigin: "0% 50% -50",
    ease: "back",
    stagger: 0.01
  });
}

gsap.utils.toArray(".split-text").forEach(function (element) {
  ScrollTrigger.create({
    trigger: element,
    onEnter: function () {
      playAnimation();
      ScrollTrigger.getById(this.vars.id).kill();
    }
  });
});