How to prevent keyframe animation to restart when scrolling again? - css

Question

I have a react page, whose main sections's visibility in the viewport are watched by an intersection observer. Once the section is visible by the user, a keyframe is triggered (usually a basic opacity transition from 0 to 1).
The thing is that the keyframes start again each time I scroll back up/down, which is annoying from a ux perspective. How to prevent keyframes animation to trigger again once they have happened?
Here is a code snippet:
import { useInView } from "react-intersection-observer";
const reveal = keyframes`
0% {opacity: 0;}
100% {opacity: 1;}
`;
const Section = styled.section`
margin: 64px 0;
`;
const SectionTitle = styled.h3<{ inView: boolean }>`
opacity: 0;
animation: ${({ inView }) =>
inView &&
css`
${reveal} 1s ease forwards
`};
`;
const Text = styled.p<{ inView: boolean }>`
opacity: 0;
animation: ${({ inView }) =>
inView &&
css`
${reveal} 1.5s ease forwards
`};
`;
export default function Home() {
const [about, aboutInView] = useInView();
const [pricing, pricingInView] = useInView();
return (
<div>
<Header />
<Section ref={about}>
<SectionTitle inView={aboutInView}>About</SectionTitle>
<Text inView={aboutInView}>about text</Text>
</Section>
<Section ref={pricing}>
<Text inView={pricingInView}>pricing text</Text>
</Section>
</div>
);
}

Answer 1

Set {triggerOnce: true} while calling the useInView Hook
// Generally
const [ref, inView, entry] = useInView({ threshold: 0, triggerOnce: true });
// Your Case
const [about, aboutInView] = useInView({ triggerOnce: true });