Estoy usando Framer Motion y react-intersection-observer en una aplicación React para lograr el siguiente resultado:

Estoy creando una página que se divide en dos secciones, tengo un botón en la parte superior para cambiar de una sección a otra con una animación "deslizante" (en la propiedad x) controlada por <AnimatePresence /> .

Ahora, en la segunda sección hay una lista de elementos y quiero crear la animación clásica de "aparición gradual" (en opacidad) a medida que cada elemento ingresa a la ventana gráfica. Logré lograr eso con reaccionar-intersección-observador con éxito.

El problema es que quiero evitar la animación de opacidad para los primeros 1 o 2 elementos que ya estarían en la ventana gráfica si fuera una sola página (si tiene sentido), porque la animación de opacidad se superpone con la animación de diapositivas.

Aquí hay un fragmento de código simplificado que reproduce lo que he hecho. (Sé que debería usar el editor de fragmentos integrado, pero no es compatible con bibliotecas externas)

Para ser claros : no quiero que la animación en la opacidad del componente Comp interfiera con la diapositiva en la animación generada por AnimatePresence .

Ya intenté agregar rootMargin a las opciones de useView() y también intenté usar el gancho useisPresent() de AnimatePresence, pero ambos métodos no funcionaron.

¿Alguna solución? gracias de antemano.