【gsap】scrollTriggerとSplitTextで1文字ずつアニメーションさせる

HTML

    <div class={`${css.title} fv_title`}>
      FIRST LINE<br />
      SECOND LINE<br />
      THIRD LINE
    </div>

js import

  import { gsap } from 'gsap';
  import { ScrollTrigger } from 'gsap/ScrollTrigger';
  import { SplitText } from 'gsap/SplitText';

js SpritTextで分割

  gsap.registerPlugin(ScrollTrigger, SplitText);
  let split = SplitText.create('.fv_title', {
    type: 'lines, chars',
    mask: 'lines',
  });

js scrollTriggerでアニメーション

  gsap.fromTo(
    split.chars,
    {
      autoAlpha: 0,
      y: '100%',
    },
    {
      autoAlpha: 1,
      y: 0,
      stagger: 0.03,
      duration: 1,
      scrollTrigger: {
        trigger: '.fv_title',
        start: 'top bottom',
        toggleClass: {
          targets: '.fv_title',
          className: 'active',
        },
        once: true,
      },
    },
  );