当另一个元素的高度发生变化时，GSAP Scrolltrigger 动画开始/结束位置不会更新答案

【问题标题】：GSAP Scrolltrigger animation start/end positions don't update when there is a change in another element's height当另一个元素的高度发生变化时，GSAP Scrolltrigger 动画开始/结束位置不会更新
【发布时间】：2022-06-23 06:33:35
【问题描述】：

我有两个区域，当页面滚动时，h3 动画，使用 GSAP ScrollTrigger，在 h1 元素上方。这两个区域之间是一个元素，即笔中的绿色框，通过单击按钮和 GSAP 动画来改变高度。

问题在于，当绿色框的高度减小时，第二个标题区域的开始/结束位置不会改变（如开始/结束标记在页脚区域的页面下方所示）。所以当h3元素按预期从底部进入屏幕时，滚动动画不会开始。

我打算尝试使用计时器来观察window.document.documentElement.scrollHeight 的变化，然后以某种方式重置或刷新动画，但这似乎很骇人听闻。我缺少 GSAP 的方法来处理这种情况吗？

Codepen，这不是实际用例，而是演示问题。

let { Button, Container } = ReactBootstrap

if (typeof window !== undefined) {
  gsap.registerPlugin(ScrollTrigger)
}


const App = () => {
  const box = React.useRef(null),
        titleContainer = React.useRef(null),
        titleScroller1 = React.useRef(null),
        titleScroller2 = React.useRef(null),
        title = React.useRef(null)
  
  let boxFullSize = true
  
  function resizeBox() {
    if (boxFullSize) {
      gsap.to(box.current, {
        height: "500px"
      })
      boxFullSize = false
    } else {
      gsap.to(box.current, {
        height: "1000px"
      })
      boxFullSize = true
    }
  }
  
  React.useEffect(() => {
    [titleScroller1, titleScroller2].forEach( x => {
      gsap.to(x.current, {
        y: "-100px",
        scrollTrigger: {
          trigger: x.current,
          start: "top bottom",
          scrub: true,
          markers: true
        }
      })
    })
  })
  
  return (
    <div className="app">
      <Container className="hero" fluid="true">
        <h1>Scroll</h1>
      </Container>
      <Container>
        <Button onClick={resizeBox}>Resize Box</Button>
        <div className="titleContainer" ref={titleContainer}>
          <h1 className="lgHeading">Big Heading 1</h1>
          <div ref={titleScroller1} className="titleScroller">
            <h3 className="title" ref={title}>Small Heading 1</h3>
            <div className="lineAfter"></div>
          </div>
        </div>
        <div className="box" ref={box}>
          Box
        </div>
      </Container>
      <Container>
        <div className="titleContainer" ref={titleContainer}>
          <h1 className="lgHeading">Big Heading 2</h1>
          <div ref={titleScroller2} className="titleScroller">
            <h3 className="title" ref={title}>Small Heading 2</h3>
            <div className="lineAfter"></div>
          </div>
        </div>
      </Container>
      <footer>
        <p>Footer</p>
      </footer>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("app"))

【问题讨论】：

标签： javascript reactjs gsap

【解决方案1】：

不是最好的....但是有效...

//Init first GSAP
setTimeout(function (){
    //Init second GSAP
}, 100);

【讨论】：