Utilizing the transform property does not trigger surrounding elements to reflow. This means that the browser does not re-render the size of the containing element even when it is being moved with translate3d. Despite the element moving visually, it remains in its original position concerning the parent container's size and text flow around it.
In essence, it does not add extra space. The space referred to is the space the translated element would occupy if it were not being moved.
This concept is further explained in the third paragraph of the "Transform" section in this article.
It seems like you are attempting to achieve a parallax effect with the translate. I suggest removing the if statement adding the transform and trying using position: absolute as an alternative. Without clear details on your goal, offering a solution might be challenging.
Edit:
Upon reviewing the code, it appears you are aiming for a smooth scroll effect where images lag behind the scrolling action and gradually settle into place, similar to scrolling on a mobile device.
Your inquiry actually contains two questions, "Why is there additional space?" and "How can I achieve a smooth scroll effect?" I recommend clarifying your question or posing a separate one for each issue. However, I can provide a hint on how to address it.
Instead of adding an incrementing offset that leads to the extra space, consider detecting a scroll event, applying a class that shifts elements upward with a CSS transition, and then removing the class once scrolling stops to return everything to its original position.
Implementing this would maintain the elements in their original on-screen positions when scrolling halts, eliminating the offset issue at the end.
If you agree with this approach, I can provide you with sample code. However, I will refrain from doing so without confirmation to avoid wasted effort based on assumptions.