I am trying to recreate a demo template https://az-bold.webflow.io/ that uses scroll effects and mouse location tracking in nextjs/typescript.

I saw there was a horizontal scroll problem that does get fixed with an overflow:hidden on the section tags — but then this breaks any sticky content interactions..

I’ve not seen any examples of how to properly recreate these actions – and I am unsure how to manipulate the styles/dom to recreate the effect correctly.

I’ve started creating a function that can manipulate these elements – but how to bind it and animate it correctly against mouse events

on load there is title animation where the text is large, then shrinks, then resumes into its current place

On the sides the rings are rotating

// Hero Section
const Hero = () => {
  React.useEffect(() => {
    var ellipseLeft = document.querySelector(".ellipse-left");
    var ellipseRight = document.querySelector(".ellipse-right");
    //document.querySelectorAll('[data-fill]').forEach(elem => {
    //  elem.style.width = elem.getAttribute("data-fill");
    //});

    var rotateZ = 23;

    setInterval(() => {
      rotateZ++;
      console.log("this is the first message");

      ellipseRight.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseRight.style["transform-style"] = "preserve-3d";
      ellipseRight.style["will-change"] = "transform";

      ellipseLeft.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseLeft.style["transform-style"] = "preserve-3d";
      ellipseLeft.style["will-change"] = "transform";
    }, 50);
  }, []);

on scroll the phone unlocks and the text parallax

https://codesandbox.io/p/sandbox/fervent-fast-forked-whdvh2
https://2h4nwn.csb.app/

on reveal for the first time – these parts fade in smoothly

there is a contrast transition from light to dark in this section based on the direction and speed of scroll