CSS Animation Flickering guide on Scroll with Intersection Observer in React
I've been working on this all day and I'm experiencing an scenario where CSS animations applied to elements that are revealed on scroll using Intersection Observer are flickering in Chrome. I'm using React 17 and CSS animations defined in a separate stylesheet. The question becomes evident when the animation plays as the element comes into view, but it seems to reset unexpectedly once the scroll event is fired again. Here's a simplified version of my component: ```javascript import React, { useEffect, useRef, useState } from 'react'; const ScrollAnimationComponent = () => { const [isVisible, setIsVisible] = useState(false); const ref = useRef(null); useEffect(() => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { setIsVisible(true); observer.unobserve(entry.target); } }); }); if (ref.current) { observer.observe(ref.current); } return () => observer.disconnect(); }, []); return <div ref={ref} className={`box ${isVisible ? 'fade-in' : ''}`}>Hello World</div>; }; export default ScrollAnimationComponent; ``` And in my CSS: ```css .box { opacity: 0; transition: opacity 0.5s ease-in-out; } .fade-in { opacity: 1; } ``` The flickering occurs due to the class being removed when the element goes out of view and then added back when it comes into view again. I tried adding a `setTimeout` to delay setting `isVisible` back to `false`, but it doesn't seem to fix the flickering scenario. I'm also utilizing Chrome version 93.0.4577.63. Any insights on how to resolve this or best practices for smoother animations in such cases would be greatly appreciated. Could someone point me to the right documentation?