The issue you're facing is actually related to the IntersectionObserver not accounting for the transform property as well.
When you apply translate(-2000px, 0), it shifts your element 2000px to the left, while its width remains set to 100% (default), which is equivalent to the viewport size minus 16px (the body's margins). If your viewport is smaller than 2000px, this would mean that your element is completely outside the visible area. For example, if the viewport is 1024px wide, the element's actual width will be 1008px (1024 - 16). With the transform in place, its left edge will be at -1992px (8 - 2000) and its right edge at -984px (-1992 + 1008). This implies that the element is positioned off-screen by 984px on the left side.
If your viewport had a width larger than 2000px, the setup would have functioned properly.
It's worth reconsidering the value used for translation here, since applying a fixed absolute value like this to impact an element with a relative size often leads to issues.
Unfortunately, pseudo elements do not trigger IntersectionObservers, so it's necessary to use an actual element as a trigger: Place this trigger within the viewport just above the target element that needs animation. This way, the observer will function correctly and allow us to animate the element as desired.
const checkViewport = (elements, observer) => {
elements.forEach(element => {
element.nextElementSibling.classList.toggle("is-visible", element.isIntersecting);
});
};
const observer = new IntersectionObserver(checkViewport);
const options = {}; //Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
// Apply observer to all [data-inviewport] elements:
const animatedElements = document.querySelectorAll('.animate-trigger');
animatedElements.forEach(animatedElement => {
observer.observe(animatedElement, options);
});
.animate.scale-in {
transition: 2s;
transform: scale(0.1);
}
.animate.scale-in.is-visible {
transform: scale(1);
}
.animate.fade-rotate {
transition: 2s;
opacity: 0;
}
.animate.fade-rotate.is-visible {
transform: rotate(180deg);
opacity: 1;
}
.animate.fade-from-left {
transition: 2s;
transform: translateX(-150%);
}
.animate.fade-from-left.is-visible {
transform: translateX(0);
opacity: 1;
}
<div style="height: 200vh;"></div>
<div class="animate-trigger" aria-hidden="true"></div> <!-- New Trigger Element -->
<h2 class="animate fade-from-left">Heading</h2>