GSAP Scrolltrigger animation start/end positions don't update when there is a change in another element's height

[eoja]

I have two areas where as the page is scrolled a h3 animates, using GSAP ScrollTrigger, up over an h1 element. Between these two areas is an element, the green box in the pen, that changes height with a button click and GSAP animation.

The problem is that when the green box height is reduced, the start/end positions for the second heading area do not change (as indicated by the start/end markers being further down the page in the footer area). So the scroll animation does not start when the h3 element enters the screen from the bottom as expected.

I was going to try with a timer to watch for a change in window.document.documentElement.scrollHeight and reset or refresh the animation somehow but that seems very hackish. There must be a way with GSAP I am missing to handle this situation?

This pen demonstrates the issue:

GSAP Scroll

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"))