Reactjs Next.js中的querySelector和ID等效项？

我试图在我的Next.js上使用GSAP的scrollTrigger插件创建滚动动画，但是我遇到了错误“无法读取未定义的属性”\u GSAP”，等等

我有一个50个图像（1.5 MB）的精灵表，可以提供滚动图像

我已经研究了这两个，这很有帮助，但只是它不能很好地转化为Next.js的使用。

例如，这是正常的CSS（non-NExt.js）：

这是正常的JS（non-Next.JS）：

如您所见，代码使用类“.viewer”、“.scene”来引用HTML中的元素。 从本质上讲，我如何将这段完全可以正常工作的HTML代码翻译成可以在Next.js World中工作的代码

我应该如何使用useRef（）引用JSX元素

---

非常感谢您的帮助。

您是否确实通过npm或Thread安装了gsap并将其导入到文件中？

html,
body {
  height:100%;
}

body {
  width:100%;
}

.header {
  color: white;
  font-size: 50px;
}

.section {
  height: 50%;
  background: #293744;
  color: #899eb5;
}

.scene {
  height: 100%;
  width: 100%;
  background: #EAEAEA;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.viewer {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
  width: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/doodle-sprite.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
}

gsap.registerPlugin(ScrollTrigger);

var frame_count  = 9,
    offset_value = 100;

gsap.to(".viewer", {
  backgroundPosition: (-offset_value * frame_count * 2) + "px 50%",
  ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
  scrollTrigger: {
    trigger: ".scene",
    start: "top top",
    end: "+=" + (frame_count * offset_value),
    pin: true,
    scrub: true
  }
});