Load title tilts one after the other and asset animations on load

I’m trying to recreate this title load and fade – that is features on the az-black site

https://az-black.webflow.io/

Reduced speed by 20%

0– the page sits a little further down at the edge of the sticky (jumps to that spot on load – if near top)

1– MEET tilts first

2– BLACK tilts second

3– text reduces size and phone image fades in and slides to top

---

current code in this section thats handling the intro load poorly – also should this being uses refs instead of getIds — from what I can tell it scroll snaps to a point where the title text is sticky and the phone naturally moves further up clearing the text.

https://codesandbox.io/p/sandbox/focused-goldwasser-forked-dk957k

  //make effects in mobile image & texts ...
  React.useEffect(() => {
    document
      .getElementById("makeEffectInto-left-Text")
      ?.classList.add("makeEffectIntoText");
    document
      .getElementById("makeEffectInto-right-Text")
      ?.classList.add("makeEffectIntoText-2");

    setTimeout(() => {
      let textfontSize = document.getElementById("meedtextone");
      let textfontSize2 = document.getElementById("meedtextone2");
      textfontSize.style.fontSize = "14vw";
      textfontSize2.style.fontSize = "14vw";
      document
        .getElementById("imageId-forRemove-hiddhen")
        ?.classList.remove("hidden");
      document
        .getElementById("imageId-forRemove-hiddhen2")
        ?.classList.remove("hidden");
      document
        .getElementById("hiddenImageComesFromDown")
        ?.classList.add("imageId-forRemove-hiddhenmain");
    }, 1200);
  }, []);

---

the parallax effect that follows may work well with this solution – but I am unsure if they will conflict

const iphone = document.querySelector('.iphone-holder'),
  backgroundText = document.querySelector('.hero-text-holder')

document.addEventListener('mousemove', e => {
  const halfWindow = window.innerWidth/2,
    xVal = e.pageX - halfWindow,
    positionInWindow = (xVal/window.innerWidth),
    pct = 10 * positionInWindow
  
  iphone.style.transform = `translateX(${pct}%)`
  backgroundText.style.transform = `translateX(${-0.3*pct}%)`

})