I have set up some scroll animations on many elements of a site I'm building.

I'm using these CSS rules:

.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);
}

The hiddenLeft and hiddenRight classes are in the elements by default, and then when they are intersected during vertical scroll the show classes are added.

It all works fine, except it has created horizontal scroll to the right out of the width of the site into blank space.

I would like to keep the animations as they are but without the horizontal scroll.

A picture of me scrolling out to the side into the blank space for reference:

enter image description here

I made a very basic replication here:

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

I can see that the offending line is

transform: translateX(90%);

But that makes the animation very aesthetically pleasing. So I'm hoping there is a way to solve it while keeping that.