getty-show/src/App.jsx

import { useRef, useEffect } from "react";
import { gsap, ScrollTrigger } from "gsap/all";

import Opening from "./components/Opening";

import Section1 from "./view/Section1";
import Section2 from "./view/Section2";
import Section3 from "./view/Section3";
import Section4 from "./view/Section4";
import Section5 from "./view/Section5";
import Section6 from "./view/Section6";
import Section7 from "./view/Section6";
import Section8 from "./view/Section8";
import Section9 from "./view/Section9";
import Section10 from "./view/Section10";

import Section11 from "./view/Section11";
import Section12 from "./view/Section12";

import Section13 from "./view/Section13";
import Section14 from "./view/Section14";
import Section15 from "./view/Section15";

import { useControls } from "leva";

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.config({
  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load",
  // limitCallbacks: true,
});

let resizeTimer = null;

function App() {
  const container = useRef();
  const { debug } = useControls({ debug: false });
  const handlerResize = () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
      let height = 0.01 * window.innerHeight;
      let sHeight = ((16 * window.innerHeight) / 9) * 0.01;
      let cHeight = 0;

      if (100 * sHeight < window.innerWidth) {
        cHeight = 0.5 * (window.innerWidth - 100 * sHeight);
      }

      document.documentElement.style.setProperty(
        "--vh",
        "".concat(height, "px")
      ),
        document.documentElement.style.setProperty(
          "--cw",
          "".concat(sHeight, "px")
        ),
        document.documentElement.style.setProperty(
          "--cl",
          "".concat(cHeight, "px")
        );
      console.log("fresh");
      // ScrollTrigger.refresh();
      ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
    }, 100);
  };
  useEffect(() => {
    window.addEventListener("resize", handlerResize, false);
    handlerResize();
    document.documentElement.style.overflow = "auto";
  });

  return (
    <div ref={container}>
      <Opening></Opening>

      <Section1 debug={debug} />
      <Section2 debug={debug} />
      <Section3 debug={debug} />
      <Section4 debug={debug} />
      <Section5 debug={debug} />
      <Section6 debug={debug} />
      <Section7 debug={debug} />
      <Section8 debug={debug} />
      <Section9 debug={debug} />
      <Section10 debug={debug} />
      <Section11 debug={debug} />
      <Section12 debug={debug} />
      <Section13 debug={debug} />
      <Section14 debug={debug} />
      <Section15 debug={debug} />
    </div>
  );
}

export default App;