Intersection Observer API with react

Question

I am trying to create a navigation tracker on a page where a user scrolls with the intersection observer API and a tracker shows what section on the page in react like something shown in the website with this link https://olaolu.dev/ with the boxes that changes on scroll (scroll indicators), I already created a code sandbox. anyone who can assist me would mean a lot. been getting errors here and there don't even know what to do again, Link to code sandbox below

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

score 0 · Answer 1 · answered Dec 15 '21 at 10:09

I only used react-intersection-observer with framer motion before, I added a ref to my h1 so the observer knows if it's inView or not.

controls.start will trigger if inView is true.

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}
        >
    </>
  );
}

Intersection Observer API with react

1 Answers1