javascript - React 和 Gsap 动画问题

Question

所以我正在尝试使用 Gsap 为我的反应应用程序制作动画我正在尝试使用滚动触发器创建动画当该部分进入视图时，标题应该移动。

我正在从我拥有的数据中呈现一个列表。

问题：标题为第一部分移动，但如果我延迟滚动，它不会为其他部分移动。意味着它只在第一部分移动。

我尝试过使用 gsap useEffect 方法，但它没有用，并且使用 Tween 组件方法仍然没有用。

import React, { useRef, useEffect } from "react";
import { homeData } from "./homedata";
import classes from "./MainContainer.module.css";
import { gsap } from "gsap";
import { Tween } from "react-gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

const MainContainer = () => {
  const boxRef = useRef(homeData.map(() => React.createRef()));

  useEffect(() => {
    // boxRef.current.forEach((ref, index) => {
    // gsap.fromTo(
    //   ref.current,
    //   { y: 0 },
    //   {
    //     y: -100,
    //     duration: 2,
    //     ease: "bounce",
    //     scrollTrigger: {
    //       id: `section-${index}`,
    //       trigger: boxRef.current[index].current,
    //       start: "top center+=100",
    //     },
    //   }
    // );
    // console.log(ScrollTrigger);
    // });
    // ScrollTrigger.create({
    //   trigger: boxRef.current[2].current,
    //   onEnter: () => {
    //     console.log("Happened");
    //   },
    //   // onLeave: myLeaveFunc,
    //   // onEnterBack: myEnterFunc,
    //   // onLeaveBack: myLeaveFunc,
    // });
    // console.log(boxRef.current[0].current.focus);
    // //
    // gsap.to(boxRef.current[2].current, {
    //   y: -100,
    //   duration: 2,
    //   ease: "bounce",
    //   delay: 1,
    //   scrollTrigger: boxRef.current[2].current,
    // });
  }, []);

  console.log(boxRef);
  return (
    <section>
      {homeData.map((location, index) => {
        return (
          <section
            id={`section-${index}`}
            key={index}
            className={classes["home-section"]}
            style={{ background: `url(${location.image}) center/cover` }}
          >
            <div className={classes["left-side-main"]}>
              <Tween
                to={{
                  x: "300px",

                  scrollTrigger: {
                    trigger: `#heading${index}`,
                  },
                }}
              >
                <h1 ref={boxRef.current[index]} id={`heading${index}`}>
                  {location.location}
                </h1>
              </Tween>
              <div className={classes["previous-next"]}>
                <button>Previous</button>
                <span></span>
                <button>Next</button>
              </div>
            </div>
            <div className={classes["right-side-main"]}>
              <p>{location.description}</p>
              <div className={classes["images-right-side"]}>
                <img src={location.moreImages[0]} alt="" />
                <img src={location.moreImages[1]} alt="" />
              </div>
            </div>
          </section>
        );
      })}
    </section>
  );
};

export default MainContainer;

标签： javascriptreactjsgsap