在 NextJS 中使用 IntersectionObserver API 和 tailwindcss 触发淡入向上动画

Question

我正在尝试以 0.5 延迟在 4 个方向上一个一个地触发文本的淡入向上动画，这应该适用于用户使用 Intersection Observer API 进入该组件视图时。但是动画不起作用。请更正我的代码。我怎样才能使用 gsap 达到同样的效果？

这是我的代码：

const AnimationFeatureIO = () => {
  
  const callback = function (entries) {
    entries.forEach((entry) => {
      console.log(entry);
  
      if (entry.isIntersecting) {
        entry.target.classList.add(".animate-fadeInUpward");
      } else {
        entry.target.classList.remove(".animate-fadeInUpward");
      }
    });
  };
  
  const observer = new IntersectionObserver(callback);
  
  const targets = document.querySelectorAll(".animate-text");
  targets.forEach(function (target) {
    target.classList.add("opacity-0");
    observer.observe(target);
  });

  return (
    <>
    <h1 className='font-bold text-2xl text-center'>オリジナルギャングスター</h1>
      <div className='mx-auto p-20'>
        <div className='w-full animation h-screen bg-cover bg-center flex flex-wrap rounded-xl' alt='drop' style={{backgroundImage: `url(${dropImage.src})`}}>
          <div class="w-1/2 h-1/2 flex items-center justify-center animate-text">
            <div class="text-black text-2xl font-bold p-4 animate-fadeInUpward">オリジナル</div>
          </div>
          <div class="w-1/2 h-1/2 flex items-center justify-center animate-text">
            <div class="text-black text-2xl font-bold p-4 animate-fadeInUpward delay-500">やくざ</div>
          </div>
          <div class="w-1/2 h-1/2 flex items-center justify-center animate-text">
            <div class="text-black text-2xl font-bold p-4 animate-fadeInUpward delay-1000">火の嵐</div>
          </div>
          <div class="w-1/2 h-1/2 flex items-center justify-center animate-text">
            <div class="text-black text-2xl font-bold p-4 animate-fadeInUpward delay-1500">やってくる</div>
          </div>
        </div>

      </div>
    </>
  )
}

export default AnimationFeatureIO

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @keyframes fadeInUpward {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fadeInUpward {
    animation-name: fadeInUpward;
    animation-duration: 1s;
    animation-fill-mode: both;
  }

  .delay-500 {
    animation-delay: 0.5s;
  }
  .delay-1000 {
    animation-delay: 1s;
  }
  .delay-1500 {
    animation-delay: 1.5s;
  }
}