fix: save

getWebp.sh

@@ -1,7 +1,7 @@
 
 #!/bin/sh
 
-for i in {1..95}
+for i in {1..98}
 do
     item=$(printf %04d $i)
     projectID="michaux-steadi-10fps-873-rev1"

src/App.jsx

@@ -1,6 +1,4 @@
 import { useRef, useEffect } from "react";
-import LazyLoad from "react-lazyload";
-// import { useGSAP } from "@gsap/react";
 import { gsap, ScrollTrigger } from "gsap/all";
 import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
@@ -69,7 +67,6 @@ function App() {
   return (
     <div ref={container}>
       <Opening></Opening>
-      <LazyLoad height={"1300vh"}>
         <Viewer
           name="Lion Render"
           path="lion-render-10fps-873-rev1"
@@ -79,8 +76,7 @@ function App() {
             298: 40,
           }}
         />
-      </LazyLoad>
-      <LazyLoad height={"400vh"}>
+
         <Viewer
           height={"400vh"}
           name="Vessel Steadicam"
@@ -89,8 +85,8 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
-      <LazyLoad height={"800vh"}>
+    
+
         <Viewer
           height={"800vh"}
           name="Vessel Render"
@@ -99,9 +95,8 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
 
-      <LazyLoad height={"400vh"}>
+
         <Viewer
           height={"400vh"}
           name="Michaux Steadicam"
@@ -110,9 +105,7 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
 
-      <LazyLoad height={"800vh"}>
         <Viewer
           height={"800vh"}
           name="Michaux Render"
@@ -121,9 +114,7 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
 
-      <LazyLoad height={"400vh"}>
         <Viewer
           height={"400vh"}
           name="Gudea Architect Steadi"
@@ -132,8 +123,6 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
-      <LazyLoad height={"800vh"}>
         <Viewer
           height={"800vh"}
           name="Gudea Architect Render"
@@ -142,9 +131,7 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
 
-      <LazyLoad height={"800vh"}>
         <Viewer
           height={"800vh"}
           name="Dictionary Steadi"
@@ -153,9 +140,7 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
 
-      <LazyLoad height={"300vh"}>
         <Viewer
           height={"300vh"}
           name="Dictionary Render"
@@ -164,12 +149,10 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
 
-      <LazyLoad height={"200h"}>
         <Viewer
           height={"200h"}
-          name="Enheduanna Steadi "
+          name="Enheduanna Steadi"
           path="enheduanna-steadi-10fps-873-rev1"
           frameCount={40}
           pause={{
@@ -183,9 +166,7 @@ function App() {
           }}
           exitTween={pinForExit}
         />
-      </LazyLoad>
 
-      <LazyLoad height={"800vh"}>
         <Viewer
           height={"800vh"}
           name="Cone Steadi"
@@ -194,7 +175,35 @@ function App() {
           enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
-      </LazyLoad>
+
+        <Viewer
+          height={"600vh"}
+          name="Cone Render"
+          path="cone-render-10fps-873-rev1"
+          frameCount={50}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+  
+
+        <Viewer
+          height={"280vh"}
+          name="Gudea Steadi"
+          path="gudea-steadi-10fps-873-rev1"
+          frameCount={50}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+
+        <Viewer
+          height={"900vh"}
+          name="Gudea Render"
+          path="gudea-render-10fps-873-rev1"
+          frameCount={184}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
+
     </div>
   );
 }

src/components/Opening.jsx

@@ -15,7 +15,6 @@ export default function Opening() {
   const height = window.innerHeight;
 
   useEffect(() => {
-    // console.warn("containerRef.current", containerRef.current);
     gsap.set(containerRef.current.children, {
       autoAlpha: 0,
     });

src/components/ProcessBar.jsx

@@ -1,46 +0,0 @@
-import { css } from "@emotion/react";
-import { useEffect } from "react";
-import { createRef } from "react";
-
-// eslint-disable-next-line react/prop-types
-export default function ProcessBar({ progressing }) {
-  const processBarStyle = css`
-    position: fixed;
-    top: calc(100vh - 4px);
-    // top: calc(var(--vh, 1vh) * 100 - 4px);
-    left: 0;
-    width: 100vw;
-    max-width: 100%;
-    height: 4px;
-    background-color: rgba(51, 51, 68, 0.6);
-    z-index: 9;
-  `;
-  const processGoingStyle = css`
-    position: absolute;
-    width: auto;
-    height: 4px;
-    left: 0;
-    bottom: 0;
-    z-index: 10;
-  `;
-  const preProcessGoingStyle = css`
-    position: absolute;
-    width: auto;
-    height: 4px;
-    left: 0;
-    bottom: 0;
-    z-index: 10;
-  `;
-  useEffect(() => {
-    console.debug("progressing", progressing);
-  });
-
-  const processingRef = createRef();
-  const preProcessingRef = createRef();
-  return (
-    <div css={processBarStyle}>
-      <div css={processGoingStyle} ref={processingRef}></div>
-      <div css={preProcessGoingStyle} ref={preProcessingRef}></div>
-    </div>
-  );
-}