reactjs - 带有反应的交叉口观察者 API

Question

我正在尝试在用户使用交叉点观察者 API 滚动的页面上创建一个导航跟踪器，并且跟踪器显示页面上的哪个部分的反应类似于网站中显示的内容，带有此链接https://olaolu.dev/与滚动更改的框（滚动指示器），我已经创建了一个代码沙箱。任何可以帮助我的人都意义重大。一直在这里出错，甚至不知道该怎么做，链接到下面的代码沙箱

https://codesandbox.io/s/tender-oskar-rvbz5?file=/src/App.js

Answer 1

我之前只使用了带有帧运动的 react-intersection-observer，我在我的 h1 中添加了一个 ref，以便观察者知道它是否是 inView。

如果 inView 为真，controls.start 将触发。

import { useInView } from "react-intersection-observer";

const scrollVariant = {
  hidden: {
    opacity: 0,
    x: 0,
    transition: {
      duration: 1,
    },
  },
  visible: {
    opacity: 1,
    x: 250,
    transition: {
      duration: 1,
    },
  },
};
  
export default function Home() {
  const controls = useAnimation();

  const { ref, inView } = useInView({
    triggerOnce: false,
  });

  React.useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
    if (!inView) {
      controls.start("hidden");
    }
  }, [controls, inView]);

  return (
    <>
        <motion.h1
          variants={scrollVariant}
          initial="hidden"
          animate={controls}
          ref={ref}
        >
    </>
  );
}