How to make animations works with IntersectionObserver in React app with Tailwind

Question

I'm stuck. So what do I want from my app:

to animate sections with left fading and opacity (0 to 1) when I scroll down or up.
reuse this component later with different separate components.

What I have now:

Js function that perfectly works with simple HTML and CSS.
nothing from my 'want list'

Please help! My code is next:

import React from 'react'; const TestAnimation = () => { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('.opacity-100'); } else { entry.target.classList.remove('.opacity-100'); } }); }); const hiddenElements = document.querySelectorAll('.opacity-0'); hiddenElements.forEach((el) => { observer.observe(el); }); return ( <div className='m-0 bg-slate-900 p-0 text-white'> <section className='grid min-h-screen place-items-center content-center opacity-0'> <h1>Test</h1> </section> <section className='grid min-h-screen place-items-center content-center opacity-0'> <h2>This is first page</h2> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem modi voluptatem est iste a commodi nesciunt saepe quisquam id dignissimos odit, repellat asperiores laboriosam quibusdam expedita itaque blanditiis eos pariatur. </p> </section> <section className='grid min-h-screen place-items-center content-center opacity-0'> <h2>This is third page</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur veniam sint illo quas beatae, eum omnis, deleniti error, eveniet praesentium fugiat quia quod? Maxime, placeat reiciendis ab debitis exercitationem nemo. Laborum perspiciatis eum architecto laboriosam, necessitatibus voluptatibus cupiditate accusantium corrupti placeat mollitia omnis tenetur! Incidunt fugiat possimus quod, quidem itaque ducimus, perspiciatis eligendi, commodi voluptate cupiditate nihil corrupti soluta maxime. </p> </section> <section className='grid min-h-screen place-items-center content-center opacity-0'> <h2>this is Fourth page</h2> <p className='text-center'> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos similique harum, officiis facere odit adipisci maxime obcaecati placeat, quibusdam totam magni eaque? Dicta id commodi saepe dignissimos quam unde eaque. </p> </section> </div> ); }; export default TestAnimation;

Hasan Aga · Accepted Answer · 2023-02-08 12:21:25Z

You should move the initiation of the intersection observer into a useEffect hook.

Here is an example of an Observer component I've used in the past:

export default function Observer({ children, sectionRef, callback }) { function onObserver(entries) { const entry = entries[0]; console.log(entry); if (entry.isIntersecting) { callback(sectionRef.current.id); console.log("element in:", entry.target.id); } else { console.log("element left:", entry.target.id); } } useEffect(() => { const refCopy = sectionRef; let options = { root: null, rootMargin: "0% 0% -5% 0%", threshold: [0.5], }; let observer = new IntersectionObserver(onObserver, options); if (refCopy.current) { observer.observe(refCopy.current); } return () => { if (refCopy.current) { observer.unobserve(refCopy.current); } }; }, [sectionRef]); return <div id="observation">{children}</div>; }

And here is how to use it:

export default function Education({ children, handleInView }) { const sectionRef = useRef(null); return ( <Observer sectionRef={sectionRef} callback={handleInView}> <section ref={sectionRef} id="education" className="education" data-scroll-section data-scroll data-scroll-class="purpleColor" > <Pencils /> <div className="details"> <div className="side-by-side"> <div className="title" data-scroll data-scroll-speed={2}> <span>Fullstack</span> <span> Software </span> <span>Engineer</span> </div> </div> </div> </section> </Observer> ); }

Collectives™ on Stack Overflow

How to make animations works with IntersectionObserver in React app with Tailwind

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related