Gsap

You can use Gsap library along with its extensions: ScrollTrigger and SplitText. Use the following code to add your custom SplitText effect:

window.customAnimationCallback = (split, element) => {
  if (element.classList.contains('animationStyle01')) {
    return gsap.from(split.chars, {
      scrollTrigger: {
        trigger: element,
        start: 'bottom bottom',
      },
      rotationX: -10,
      rotationY: -20,
      x: 60,
      y: 60,
      z: 200,
      perspective: 1600,
      opacity: 0,
      stagger: 0.05,
      duration: 1.25,
      ease: 'power3.out',
      onComplete: () => {
        split.revert();
      }
    });
  } else if (element.classList.contains('animationStyle02')) {
    return gsap.from(split.chars, {
      scrollTrigger: {
        trigger: element,
        start: 'bottom bottom',
      },
      rotationX: -10,
      rotationY: -20,
      x: 60,
      y: 60,
      z: 200,
      perspective: 1600,
      opacity: 0,
      stagger: 0.05,
      duration: 1.25,
      ease: 'power3.Out',
      onComplete: () => {
        split.revert();
      }
    });
  } else {
    return gsap.from(split.chars, {
      scrollTrigger: {
        trigger: element,
        start: 'bottom bottom',
      },
      y: 40,
      opacity: 0,
      stagger: 0.02,
      duration: 0.8,
      ease: 'power1.inOut',
      onComplete: () => {
        split.revert();
      }
    });
  }
};

To enable the SplitText effect, simply add a .xx-text class name to the element containing the text you wish to animate. The effect has a default animation, which you can change to your liking by using the script above. The script also uses ScrollTrigger so that the animation will trigger once the element is in viewport.