Estoy usando js de página completa para un efecto de desplazamiento único en la página y usando el observador de intersección para detectar si el elemento está dentro de la ventana gráfica para agregar la clase de animación. La animación de fundido de izquierda a derecha se usa y funciona en algunos elementos. Para hacer eso, tengo clases de la siguiente manera:

 .animate-x { opacity: 0; transform: translateX(-50%); transition: all .5s ease-out; } .fl { opacity: 1; transform: translateX(0); }

usando translateX(-50%) crea algunos elementos para establecer la posición fuera de la ventana gráfica que no detecta el Intersection Observer. Supongo que esto no debería haber sucedido ya que he usado este tipo de propiedades para la animación antes.

enlace al repositorio: https://github.com/Trushar10/theinstock.git

enlace al sitio: https://theinstock.netlify.app/

En la sección 2, el primer elemento izquierdo con la description de la clase tiene la clase animate-x , a la que se debe agregar la clase fl cuando aparece en la ventana gráfica. en el lado derecho, el elemento con la clase ````benefits has class fr``` agregada a fadein desde la animación derecha.

Echa un vistazo a los enlaces si ayuda.