How can i keep my changes after not Intersecting to my element? - reactjs

Question

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?

Answer 1

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]);