ReactJS ,Intersection Observer , GSAP (不要动画)

Question

所以我只在 ReactJS 工作了几个月，所以如果解决方案很简单，请见谅。

一旦所需的部分在视口中，我正在使用 react-use 中的交叉点观察器触发 gsap 动画。现在我不希望它动画出来，只动画（在初始加载时）。我按照教程进行操作，但他们的解释只是注释掉淡出动画，这对我不起作用。

我的代码如下所示：

const App = () =>{

 const sectionRef = useRef(null);

 const headlineFirst = ".animate-this-div"

 const intersection = useIntersection(sectionRef, {root: null,rootMargin: 
 "0px",threshold: 0.4});

 const fadeIn = () => {gsap.to(headlineFirst, 1, {opacity: 1,y:11,})};

 const fadeOut = () => {

 // gsap.to(headlineFirst , 1, {

 // opacity: 1,

 // y:49,

 // })

};



intersection && intersection.intersectionRatio < 0.4
? fadeOut()
: fadeIn(headlineFirst);

return (

<div ref={ sectionRef } className="some-div">

 <div className="animate-this-div"></div>

</div>

应该是三元运算符吧。一个“if 语句”会起作用吗，那个“if 语句”看起来会如何（对不起，在 ReactJS 上仍然是一个菜鸟）？任何建议都会非常感谢

Answer 1

Scroll Trigger 只是一个插件，可以帮助您控制 GSAP 动画（单个补间或时间轴）。受控制的内容使用与任何其他 GSAP 实例相同的方法：

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const boxStyle = {
  opacity: 0,
  transform: "translateY(50px)"
};

export default function App() {
  const boxes = useRef([]);
  const boxesContainer = useRef();

  useEffect(() => {
    gsap.to(boxes.current, {
      scrollTrigger: {
        trigger: boxesContainer.current,
        start: "top 20%",
        markers: true
      },
      duration: 0.5,
      stagger: 0.1,
      opacity: 1,
      y: 0
    });
  }, []);

  return (
    <main>
      <section className="h-screen w-full bg-indigo-600">
        <h1 className="text-center text-3xl text-white font-bold px-4 py-8">
          ScrollTrigger React
        </h1>
      </section>
      <div
        id="boxContainer"
        className="w-full h-screen bg-green-700 py-2"
        ref={boxesContainer}
      >
        <div
          style={boxStyle}
          className="box w-1/4 bg-white h-24 m-2"
          ref={e => (boxes.current[0] = e)}
        />
        <div
          style={boxStyle}
          className="box w-1/4 bg-white h-24 m-2"
          ref={e => (boxes.current[1] = e)}
        />
        <div
          style={boxStyle}
          className="box w-1/4 bg-white h-24 m-2"
          ref={e => (boxes.current[2] = e)}
        />
        <div
          style={boxStyle}
          className="box w-1/4 bg-white h-24 m-2"
          ref={e => (boxes.current[3] = e)}
        />
      </div>
      <section className="h-screen w-full bg-indigo-600" />
    </main>
  );
}

上面的代码假设你有一系列元素的类box在另一个元素的id为boxesContainer，每个盒子的不透明度为0，并应用了一个Y平移。当盒子父容器的顶部到达距离视口顶部 20% 的点时，该代码将为每个盒子设置 0.5 秒的动画，交错时间为 0.1 秒。

现场样本：

https://codesandbox.io/s/unruffled-wozniak-ho12x?file=/src/App.js