Image not moving smoothly using translateX attribute

Currently what I’m trying to achieve is this:

enter image description here

Where the middle image stays in the middle vertically, but keeps moving horizontally along with text from left to right in a smooth manner. I’m using useEffect to achieve this for manipulating my DOM attributes. Currently the animation for the first 2 slides is working properly, but when I scroll to go to the 3rd slide, my image directly moves to the right without any animation. How do I fix this problem?

CodeSandbox(View in fullscreen to get a better idea): https://codesandbox.io/s/stoic-rumple-s8cr6?file=/src/App.js

Code:

const [display, setDisplay] = useState(false);

  useEffect(function onFirstMount() {
    const changeBackground = () => {
      let value = window.scrollY;
      console.log(value);
      let img = document.getElementById("moveLeft");
      let text = document.getElementById("moveUp");
      let text2 = document.getElementById("text2");
      let text3 = document.getElementById("text3");

      text.style.marginTop = "-" + value * 0.5 + "px";
      text2.style.transform = `translateX(${value * 1.3}px)`;
      text3.style.transform = `translateX(-${value * 1.3}px)`;

      if (value > 600) {
        img.style.transform = `translateX(${value * 0.5}px)`;
      } else {
        img.style.transform = `translateX(-${value * 0.5}px)`;
      }

      if (value > 600) {
        setIndex(true);
      } else {
        setIndex(false);
      }

      if (value > 600) {
        setDisplay(true);
      } else {
        setDisplay(false);
      }
    };
    window.addEventListener("scroll", changeBackground);
    return () => window.removeEventListener("scroll", changeBackground);
  }, []);

  return (
    <>
      <div className="App">
        <div className="middletext" id="moveUp" style={{ zIndex: "9" }}>
          Random Text
        </div>

        <div class="inflow">
          <div class="positioner">
            <div class="fixed" style={{ zIndex: "10" }}>
              <div id="moveLeft">
                <img
                  alt="passport"
                  src="https://cdn.britannica.com/87/122087-050-1C269E8D/Cover-passport.jpg"
                />
              </div>
            </div>
          </div>
          <div className="halfWindow" style={{ zIndex: "8" }}></div>
          <div>
            <div class="fixedText">
              <div id="text2" className="text2" style={{ zIndex: "7" }}>
                Random Text
              </div>
            </div>
          </div>
          <div className="secondhalfWindow" style={{ zIndex: "6" }}></div>
          <div>
            <div
              class="secondfixedText"
              style={{
                zIndex: index ? "11" : "5",
                display: display ? "block" : "none"
              }}
            >
              <div id="text3" className="text3">
                Random Text 2
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="App"></div>
      <div className="App"></div>

In this code I’ve set it up in such a way that when the height reaches more that 600px, the image should start moving to the right smoothly.

Answer

Once you reach the window.scrollY of 600, your element is 600*0.5 moved to the left.

When you are at window.scrollY of more than 600, your img is back to it’s inital place,

at this moment you have to move it back manually 300px (600*.5)

but you have to also consider that the horizontal displacement to the left, is between the inital place and the right edge of image

when you are moving the img to the right, you are actually moving it by its left edge

so, you also need to subtract the width of your img which is 280px

  let imgWidth=280
  if (value > 600) {
    img.style.transform = `translateX(${((value) * 0.5)-300-imgWidth}px)`;
  } else {
    img.style.transform = `translateX(-${value * 0.5}px)`;


  }