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 Section16 from "./view/Section16";
import Section17 from "./view/Section17";

import Closing from "./view/Closing";

import { useControls } from "leva";

gsap.registerPlugin(ScrollTrigger);

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

let resizeTimer = null;

const defaultDebug = localStorage.getItem("debug") === "true" ? true : false;
function App() {
  const container = useRef();
  const { debug } = useControls({
    debug: defaultDebug,
  });
  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";
    var vConsole = new window.VConsole();

    if (debug) {
      vConsole.showSwitch();
    } else {
      vConsole.hideSwitch();
    }
    localStorage.setItem("debug", debug);
  });
  const props = {
    // scrollSpeed: scrollSpeed,
    debug: debug,
  };

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

      <Section1 {...props} />
      <Section2 {...props} />
      <Section3 {...props} />
      <Section4 {...props} />
      <Section5 {...props} />
      <Section6 {...props} />
      <Section7 {...props} />
      <Section8 {...props} />
      <Section9 {...props} />
      <Section10 {...props} />
      <Section11 {...props} />
      <Section12 {...props} />
      <Section13 {...props} />
      <Section14 {...props} />
      <Section15 {...props} />
      <Section16 {...props} />
      <Section17 {...props} />
      <Closing {...props} />
    </div>
  );
}

export default App;