0

GSAP 脚本在页面图像加载之前运行，因此 scrollTrigger 标记在页面上的高度错误，如下所示，这会导致动画无法按预期运行（当滚动到视口时，图像应该淡入和向上）： 在此处输入图像描述

而在图像加载并调整页面大小后，它们位于正确的位置并且动画按预期运行：

在此处输入图像描述

此外，如果页面被刷新，滚动动画根本不会运行。

我尝试过 useLayoutEffect 而不是 useEffect 并尝试使用 refs 和 onload 事件来等待运行 GSAP 脚本，但都没有奏效。我正在使用 React-Bootstrap 并且图像是响应式的，因此我无法在父元素上设置固定高度，因为我不知道它们将提前渲染的高度。

我做了一支笔来演示这个问题： https ://codepen.io/EOJA/pen/XWzBZew?editors=0010

let { Card, Col, Container, Row } = ReactBootstrap

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

const sources = [
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/bridge_1.jpg?raw=true", alt: "bridge"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/car_1.jpg?raw=true", alt: "car"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/computer_1.jpg?raw=true", alt: "computer"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/bridge_1.jpg?raw=true", alt: "bridge"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/car_1.jpg?raw=true", alt: "car"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/computer_1.jpg?raw=true", alt: "computer"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/bridge_1.jpg?raw=true", alt: "bridge"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/car_1.jpg?raw=true", alt: "car"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/computer_1.jpg?raw=true", alt: "computer"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/bridge_1.jpg?raw=true", alt: "bridge"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/car_1.jpg?raw=true", alt: "car"},
  {src: "https://github.com/eoja82/For-Sale/blob/master/static/img/computer_1.jpg?raw=true", alt: "computer"}
]

const App = () => {
  const images = React.useRef(null),
        q = gsap.utils.selector(images)
  
  React.useEffect(() => {
    q(".card").map( card => {
      return gsap.from(card, {
        y: 50,
        opacity: 0,
        duration: .6,
        scrollTrigger: {
          markers: true,
          trigger: card,
          start: "top bottom-=100px",
          toggleActions: "play pause resume reverse"
        }
      })
    })
  })

  return (
    <div>
      <div>
        <div id="section1">First Section</div>
      </div>
      <Container>
        <Row xs={1} s={1} md={2} lg={2} xl={3} ref={images} id="images">
          {sources.map( (x, i) => {
            return (
              <Col className="flipCard" style={{padding: "8px"}} key={i}>
                <Card className="cardInner bg-dark" style={{border: "none"}}>
                  <div className="cardFront">
                    <Card.Img src={x.src} alt={x.alt} />
                  </div>
                  <div className="cardBack">
                    <Card.Body>
                      <Card.Title>{x.alt}</Card.Title>
                    </Card.Body>
                  </div>
                </Card>
              </Col>
            )
          })}
        </Row>
      </Container>
      <div>
        <div id="section2">Last Section</div>
      </div>
    </div>
  )
  
}

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

0 回答 0