I am using fullpage js for single scroll effect on the page and using intersection observer to detect if the element is inside the viewport to add the animation class. The fadein animation from left and right is used and works on some elements. To do that I have classes as below:

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

.fl {
    opacity: 1;
    transform: translateX(0);
}

using translateX(-50%) make some elements to set position outside the viewport which does not detected by the Intersection Observer. I suppose this should not have happen since I have used this kind of propertied for animation before.

link to repo: https://github.com/Trushar10/theinstock.git

link to site: https://theinstock.netlify.app/

In section 2 left first element with class description has animate-x class which should have fl class added when the it comes in viewport. on the right side the element with class ````benefitshas classfr``` added to fadein from right animation.

Check out the links if helps.