useIntersectionObserver()

description

  • watch the intersection of the target.

demo

  • target
  • target
  • target

code

const Demo = () => {
   const ref = useRef(null);
   useIntersectionObserver({
      targetRef: ref,
      onEnter: (target) => {
            gsap.fromTo(
               target,
               {
                  y: 120,
               },
               {
                  y: 0,
                  duration: 1,
                  ease: "power3.out",
               }
            );
         },
   });
   const ListArr = [...Array(3)].map((_, i) => <List key={i} index={i} />);
   return (
      <ul ref={ref} className={s.sample}>
         {ListArr}
      </ul>
   );
};