ReactJS、交叉点观察者、GSAP（不设置动画）

因此，我在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>

const-App=（）=>{
const sectionRef=useRef（null）；
const headlineFirst=“.animate此div”
const intersection=useConsection（sectionRef，{root:null，rootMargin:
“0px”，阈值：0.4}）；
常数fadeIn=（）=>{gsap.to（headlineFirst，1，{opacity:1，y:11，}）；
常数衰减=（）=>{
//gsap.to（标题第一，1{
//不透明度：1，
//y:49，
// })
};
交叉点和交叉点。交叉比<0.4
？衰减（）
：fadeIn（标题行优先）；
返回(

---

它可能是三元运算符。“如果语句”会起作用吗，“如果语句”看起来怎么样（很抱歉仍然是ReactJS的一个noob）？任何建议都将非常受欢迎

滚动触发器只是一个插件，可以帮助您控制GSAP动画（单tween或时间线）。得到控制的内容使用与任何其他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>
  );
}

import React，{useRef，useffect}来自“React”；
从“gsap”导入{gsap}；
从“gsap/ScrollTrigger”导入{ScrollTrigger}；
gsap.registerPlugin（滚动触发器）；
常量框样式={
不透明度：0，
转换：“translateY（50px）”
};
导出默认函数App（）{
const-box=useRef（[]）；
const-boxescocontainer=useRef（）；
useffect（（）=>{
gsap.至（当前）{
滚动触发器：{
触发器：boxescocontainer.current，
开始：“前20%”，
马克：对
},
持续时间：0.5，
参差：0.1，
不透明度：1，
y:0
});
}, []);
返回(
滚动触发反应
（box.current[0]=e）}
/>
（box.current[1]=e）}
/>
（box.current[2]=e）}
/>
（box.current[3]=e）}
/>
);
}

上面的代码假设您在另一个id为

boxesContainer

的元素中有一系列类为

box

的元素，每个框的不透明度为0，并应用了Y平移。当父框顶部包含时，该代码将以0.1秒的交错时间为每个框设置0.5秒的动画r、 到达距离视口顶部20%的点

现场样品：

---

你为什么不试试GSAP的滚动触发插件？：谢谢你的回复@Rodrigo。GSAP给滚动触发添加了交错动画吗？谢谢你，罗德里戈，谢谢。这解决了很多问题，但我唯一的问题是如果我不得不给其中一个“盒子”怎么办它有自己的动画值。ScrollTrigger似乎忽略了延迟。这是一个实时示例：请注意，我正在尝试将P文本与标题错开。或者是否有一种方法可以编写一个useEffect，但将不同的动画值分配给不同的div？