I am working on an app that requires scroll animation. Hence, I try to add class to an element via IntersectionObserver.
I also get element via useRef hook, not with window.document.
My problem is that after class is added to the element css doesn't change how element displays. In that case - it doesnt switch opacity to 1.
I understand that problem is in how Next.js handles css, but what is the solution?
Thanks ahead!
Element that changes the class:
const ImageSection = forwardRef((props, ref) => {
return (
<section className={classes.firstSection}>
<div className={classes.imageSlide} ref={ref}>
<div className={classes.purpleMainImg}>
<Image
src={`/images/IMG_8780.svg`}
layout='fill'
objectFit='contain'
/>
</div>
</div>
</section>
)
})
export default ImageSection
Index element with observer:
export default function Main({ lang }) {
const sectionOne = useRef(null)
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible')
}
});
})
observer.observe(sectionOne.current)
}, [])
return (
<Fragment>
<Head>
<title>Main</title>
</Head>
<main className={classes.main} >
<ImageSection ref={sectionOne} />
<section className={classes.section}></section>
<section className={classes.section}></section>
</main>
</Fragment>
)
}
P.S. I understand that one way is to conditionally render class, though it will be a pain to pass new props and so on. Any other options?