How to remove out of bounds during animation (prohibit any movement along the X axis)?

Question

css

I have a page where elements slide out when scrolling, but the problem is that they create scrolling, I removed it using the overflow-x property with a value of hidden. But still there is a flaw. There is a chance that when a person refreshes the page, they will get to the end of this scroll and get this:

I tried to change the x-axis scroll to 0 during the animation (window.pageXOffset), but it did not help.

Answer 1

Replace animItems in HTML with animationItems :)
In the console, it says, “I can't find animItems!”.
The JS code must come before the , in this case. </body>