I'm using Framer Motion and react-intersection-observer in a React App to achieve the following result:

I'm creating a page that is divided into two section, I have a button on top to switch from a section to the other with a "slide-in" animation (on x property) controlled by <AnimatePresence />.

Now, in the second section there's a list of elements and I want to create the classical "fade-in" animation (on opacity) as each element enters the viewport. I managed to achieve that with react-intersection-observer successfully.

Problem is, I want to prevent the opacity animation for the first 1 or 2 elements that would already be in the viewport if it would be a single page (if it make sense), because the opacity animation overlaps with the slide animation.

Here's a simplified snippet of code that reproduces what I've done. (I know i sould be using the integrated snippet editor but it doesn't support external libraries)

To be clear: I don't want the animation on the opacity of the Comp component to interfere with the slide in animation generated by AnimatePresence.

I already tried adding rootMargin to the useView() options and i also tried using the useisPresent() hook from AnimatePresence but both methods didn't work.

Any solution? thanks in advance.