save: save

getWebp.sh

@@ -1,10 +1,10 @@
 
 #!/bin/sh
 
-for i in {1..184}
+for i in {1..95}
 do
     item=$(printf %04d $i)
-    projectID="gudea-render-10fps-873-rev1"
+    projectID="michaux-steadi-10fps-873-rev1"
     url="https://static.getty.edu/mesopotamia/$projectID/$item.webp"
     mkdir -p ./public/$projectID
     curl $url --output ./public/$projectID/$item.webp

src/App.jsx

@@ -10,7 +10,7 @@ gsap.registerPlugin(ScrollTrigger);
 
 ScrollTrigger.config({
   autoRefreshEvents: "visibilitychange,DOMContentLoaded,load",
-  limitCallbacks: true,
+  // limitCallbacks: true,
 });
 
 let resizeTimer = null;
@@ -42,17 +42,18 @@ function App() {
   useEffect(() => {
     window.addEventListener("resize", handlerResize, false);
     handlerResize();
+    document.documentElement.style.overflow = "auto";
   });
 
   const pinForExit = {
     onLeave: function (e) {
-      console.error("pinForExit-onLeave", e.trigger);
+      // console.error("pinForExit-onLeave", e.trigger);
       gsap.set(e.trigger, {
         autoAlpha: 0,
       });
     },
     onEnterBack: function (e) {
-      console.error("pinForExit-onEnterBack", e.trigger);
+      // console.error("pinForExit-onEnterBack", e.trigger);
       gsap.set(e.trigger, {
         autoAlpha: 1,
       });
@@ -99,6 +100,101 @@ function App() {
           exitTween={pinForExit}
         />
       </LazyLoad>
+
+      <LazyLoad height={"400vh"}>
+        <Viewer
+          height={"400vh"}
+          name="Michaux Steadicam"
+          path="michaux-steadi-10fps-873-rev1"
+          frameCount={98}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
+
+      <LazyLoad height={"800vh"}>
+        <Viewer
+          height={"800vh"}
+          name="Michaux Render"
+          path="michaux-render-10fps-873-rev1"
+          frameCount={158}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
+
+      <LazyLoad height={"400vh"}>
+        <Viewer
+          height={"400vh"}
+          name="Gudea Architect Steadi"
+          path="gudea-architect-steadi-10fps-873-rev1"
+          frameCount={84}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
+      <LazyLoad height={"800vh"}>
+        <Viewer
+          height={"800vh"}
+          name="Gudea Architect Render"
+          path="gudea-architect-render-10fps-873-rev1"
+          frameCount={201}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
+
+      <LazyLoad height={"800vh"}>
+        <Viewer
+          height={"800vh"}
+          name="Dictionary Steadi"
+          path="dictionary-steadi-10fps-873-rev1"
+          frameCount={258}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
+
+      <LazyLoad height={"300vh"}>
+        <Viewer
+          height={"300vh"}
+          name="Dictionary Render"
+          path="dictionary-steadi-10fps-873-rev1"
+          frameCount={45}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
+
+      <LazyLoad height={"200h"}>
+        <Viewer
+          height={"200h"}
+          name="Enheduanna Steadi "
+          path="enheduanna-steadi-10fps-873-rev1"
+          frameCount={40}
+          pause={{
+            1: 80,
+          }}
+          enterTween={{
+            from: {
+              autoAlpha: 0,
+              y: 500,
+            },
+          }}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
+
+      <LazyLoad height={"200h"}>
+        <Viewer
+          height={"200h"}
+          name="Cone Steadi"
+          path="cone-steadi-10fps-873-rev1"
+          frameCount={256}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+      </LazyLoad>
     </div>
   );
 }

src/components/Opening.jsx

@@ -15,7 +15,7 @@ export default function Opening() {
   const height = window.innerHeight;
 
   useEffect(() => {
-    console.warn("containerRef.current", containerRef.current);
+    // console.warn("containerRef.current", containerRef.current);
     gsap.set(containerRef.current.children, {
       autoAlpha: 0,
     });
@@ -24,20 +24,27 @@ export default function Opening() {
       autoAlpha: 1,
       delay: 0.77,
     });
-    // gsap.to(containerRef.current.children, {
-    //   autoAlpha: 0,
-    //   y: -125,
-    //   stagger: 0.08,
-    //   scrollTrigger: {
-    //     scrub: true,
-    //     pin: true,
-    //     pinSpacing: false,
-    //     ease: "none",
-    //     trigger: containerRef.current,
-    //     start: "top top",
-    //     end: "center top",
-    //   },
-    // });
+    gsap.to(containerRef.current, {
+      opacity: 0.5,
+      repeat: -1,
+      yoyo: !0,
+      duration: 1.5,
+      delay: 1.66,
+    });
+    gsap.to(containerRef.current.children, {
+      autoAlpha: 0,
+      y: -125,
+      stagger: 0.08,
+      scrollTrigger: {
+        scrub: true,
+        pin: true,
+        pinSpacing: false,
+        ease: "none",
+        trigger: containerRef.current,
+        start: "top top",
+        end: "center top",
+      },
+    });
   });
 
   return (

src/components/Viewer.jsx

@@ -1,8 +1,11 @@
 import { Component, createRef } from "react";
 import PropTypes from "prop-types";
 import { gsap, ScrollTrigger } from "gsap/all";
+import LazyLoad from "react-lazyload";
 import { css } from "@emotion/react";
+
 const isDebug = Number(import.meta.env.VITE_APP_DEBUG) === 1;
+
 console.log("isDebug", isDebug);
 export default class Viewer extends Component {
   constructor() {
@@ -81,8 +84,8 @@ export default class Viewer extends Component {
     if (!this.exitTimeline && this.props.exitTween) {
       this.initializeExitTween();
     }
-    ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
-    console.error("ScrollTrigger.getAll()", ScrollTrigger.getAll());
+
+    ScrollTrigger.refresh();
   }
 
   loadImage(index) {
@@ -105,6 +108,7 @@ export default class Viewer extends Component {
         this.poolNewFrames(index - 1);
       }
       // var t = 100 - (this.frame / this.fullFrameCount) * 100 + "%";
+      // this.loadingProgress.current.style.width
       this.loadedCount += 1;
       if (this.loadedCount === parseFloat(this.props.frameCount) - 1) {
         this.loadingComplete();
@@ -180,7 +184,6 @@ export default class Viewer extends Component {
         onEnter: () => {
           // closeLoading();
           this.isAbove = false;
-          console.log("onEnter");
           console.log(this.props.path, "onEnter");
         },
         onEnterBack: () => {
@@ -220,14 +223,13 @@ export default class Viewer extends Component {
   initializeEnterTween() {
     const duration = this.props.enterTween.duration || 1;
     let openPin = false;
-    console.warn("this.props.enterTween", this.props.enterTween);
+    console.warn("this.props.enterTween", duration, this.props.enterTween);
     gsap.set(this.viewerRef.current, {
       yPercent: -100 * duration,
     });
     if (void 0 !== this.props.enterTween.pin) {
       openPin = this.props.enterTween.pin;
     }
-
     this.enterTimeline = gsap.timeline({
       scrollTrigger: {
         trigger: this.viewerRef.current,
@@ -294,6 +296,17 @@ export default class Viewer extends Component {
         )
       );
     }
+    if (this.props.exitTween.to) {
+      this.exitTimeline.to(
+        this.viewerRef.current,
+        Object.assign(
+          {
+            ease: "none",
+          },
+          this.props.exitTween.to
+        )
+      );
+    }
   }
 
   poolNewFrames(index) {