I've implemented scroll animations on various elements of a website I'm constructing.
The CSS rules I'm utilizing are as follows:
.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);
}
Initially, the hiddenLeft and hiddenRight classes are present in the elements, and once they intersect during vertical scroll, the show classes are added.
Everything is functioning well, except that it's causing horizontal scrolling to extend beyond the width of the site into empty space.
I'd like to retain the animations as they are but eliminate the horizontal scroll.
Here's an illustration showing me scrolling towards the side into the void for clarity:
I created a simple replication here:
https://codepen.io/acodeaday/pen/NWMYWNL
I understand that the problematic line is:
transform: translateX(90%);
However, this line contributes significantly to the visual appeal of the animation. So, I'm hoping there's a solution to resolve this issue while retaining that aspect.