加载页面时触发滚动魔术场景

Question

我在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

Answer 1

尝试这样的事情：

<Controller>
<Scene triggerHook={0} reverse indicators duration={100}>
<Tween from={{ opacity: 0, y: '0px' }} to={{ opacity: 1, y: '-100px' }}>
<div id="textBlockCont" className="textBlock__cont">
<p style={{ paddingTop: '3rem' }}>
Test
</p>
</div>
</Tween>
</Scene>
</Controller>

我认为<Scene>和<Tween>之间的div 导致了问题。