He configurado algunas animaciones de desplazamiento en muchos elementos de un sitio que estoy construyendo.

Estoy usando estas reglas CSS:

 .hiddenLeft {
 opacity: 0;
 filter: blur(5px);
 transform: translateX(-090%);
 transition: all 1s;
}

.hiddenRight {
 opacity: 0;
 filter: blur(5px);
 transform: translateX(90%);
 transition: all 1s;
}

.show {
 opacity: 1;
 filter: blur(0);
 transform: translateX(0);
}

Las clases hiddenLeft y hiddenRight están en los elementos de forma predeterminada, y luego, cuando se cruzan durante el desplazamiento vertical, se agregan las clases show.

Todo funciona bien, excepto que ha creado un desplazamiento horizontal hacia la derecha fuera del ancho del sitio en un espacio en blanco.

Me gustaría mantener las animaciones como están pero sin el desplazamiento horizontal.

Una foto mía desplazándome hacia un lado en el espacio en blanco como referencia:

ingrese la descripción de la imagen aquí

Hice una réplica muy básica aquí:

https://codepen.io/acodeaday/pen/NWMYWNL

Puedo ver que la línea ofensiva es

transformar: traducirX(90%);

Pero eso hace que la animación sea estéticamente agradable. Así que espero que haya una manera de resolverlo manteniendo eso.