我正在GatsbyJS（React）中开发我的项目。即时通讯与gsap一起使用scrollmagic，并希望基于triggerHook触发动画。 问题是动画总是在页面加载时触发，并且忽略触发元素和挂钩。指示灯设置正确。 你知道哪里有问题吗？

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import letterImg from "../../images/Acko.svg"
import "./textBlockPageComponent.scss"
import { Controller,Scene } from 'react-scrollmagic';
import { Tween } from "react-gsap"

class textBlockPageComponent extends React.Component {
  render() {
    return (
      <Controller>
      <Scene triggerHook={0.7} reverse={false} indicators={true} triggerElement="#blockOfText" duration={0}>
      <div id="blockOfText" class="textBlock">
        <Tween to={{ opacity: 1,y: "-100px" }} duration={10}>
        <div id="textBlockCont" class="textBlock__cont">
          <img class="textBlock__img" src={letterImg}></img>
          <p class="textBlock__cont_text">{this.props.text}</p>
        </div>
        </Tween>
      </div>
      </Scene>
    </Controller>
    )
  }
}
export default textBlockPageComponent