Q: How can i keep my changes after not Intersecting to my element? I'm using react and I want to make some animation when the viewport is on my desired element,
but I only want to fire it once so when observer value is false, my element style not changing again to beginning .
I'm using styled-components for styling


HomeSection.Projects = function HomeSectionProjects({ children, ...rest }) {
  const ref = useRef(null);
  const [isVisible, setVisible] = useState(false);

  const callbackFn = (entries) => {
    const [entry] = entries;
    setVisible(entry.isIntersecting);
  };

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 1,
    };

    const observer = new IntersectionObserver(callbackFn, options);
    if (ref.current) observer.observe(ref.current);
  }, [ref]);

  return <Projects ref={ref}>{children}</Projects>;
};


So here is my styled-comp


export const Projects = styled.div`
  width: 70%;
  height: 70vh;
  display: flex;
  opacity: 1;
  margin-bottom: 30vh;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  transition: opacity 1.5s ease-out;

  @media screen and (max-width: 763px) {
    margin-bottom: 20%;
    height: 50vh;
    align-items: center;
    flex-direction: column;
    padding-top: 10%;
    width: 100%;
  }

  &:hover ${ImageDiv} {
    transform: scale(0.9);
  }

  &:hover ${Title} {
    /* transform: scale(1.4); */
    font-size: 8rem;

    @media screen and (max-width: 763px) {
      font-size: 3.2rem;
    }
  }

  &:hover ${TitleInfo} {
    font-size: 2rem;
    bottom: -5%;

    @media screen and (max-width: 763px) {
      font-size: 1.5rem;
    }
  }

  &:hover ${Info} {
    left: -8%;

    @media screen and (max-width: 763px) {
    }
  }
`;


How can I achieve my goal here?

A: You can stop observing the element once it's visible. Also your callbackFn doesn't have to be outside in the function body.
useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 1,
    };

   const callbackFn = (entries) => {
    const [entry] = entries;
    if(entry.isIntersecting)
    {
    setVisible(true);
    observer.unobserve(entry.target);
    }
  };

    const observer = new IntersectionObserver(callbackFn, options);
    if (ref.current) observer.observe(ref.current);

  }, [ref]);

