save: save

src/App.jsx

@@ -185,9 +185,9 @@ function App() {
         />
       </LazyLoad>
 
-      <LazyLoad height={"200h"}>
+      <LazyLoad height={"800vh"}>
         <Viewer
-          height={"200h"}
+          height={"800vh"}
           name="Cone Steadi"
           path="cone-steadi-10fps-873-rev1"
           frameCount={256}

src/components/Viewer.jsx

@@ -20,6 +20,7 @@ export default class Viewer extends Component {
     this.canvasRef = createRef(null);
     this.processingRef = createRef(null);
     this.preProcessingRef = createRef(null);
+    this.processBarRef = createRef(null);
     this.sequence = [];
     this.loadedRenderPool = [];
     this.enterTimeline = false;
@@ -182,24 +183,25 @@ export default class Viewer extends Component {
           this.justScrolled = true;
         },
         onEnter: () => {
-          // closeLoading();
           this.isAbove = false;
           console.log(this.props.path, "onEnter");
+          this.enterShowElements();
         },
         onEnterBack: () => {
           // openLoading();
           console.log(this.props.path, "onEnterBack");
           this.isBelow = false;
+          this.enterShowElements();
         },
         onLeave: () => {
           console.log(this.props.path, "onLeave");
           this.isAbove = true;
-          // openLoading();
+          this.leaveHideElements();
         },
         onLeaveBack: () => {
           console.log(this.props.path, "onLeaveBack");
-          // openLoading();
           this.isBelow = true;
+          this.leaveHideElements();
         },
       },
     });
@@ -349,6 +351,7 @@ export default class Viewer extends Component {
     const progressingPreload =
       100 - (this.frame / this.fullFrameCount) * 100 + "%";
     const progressing = 100 - (index / this.fullFrameCount) * 100 + "%";
+    // console.log("handleSyncProessBar", this.processingRef.current);
     this.playPreBarTween = gsap.to(this.preProcessingRef.current, {
       duration: 0.05,
       right: progressingPreload,
@@ -361,11 +364,23 @@ export default class Viewer extends Component {
     });
   }
 
+  enterShowElements() {
+    gsap.set(this.processBarRef.current, {
+      autoAlpha: 1,
+    });
+  }
+  leaveHideElements() {
+    gsap.set(this.processBarRef.current, {
+      autoAlpha: 0,
+    });
+  }
+
   render() {
     return (
       <>
         <div
           className="processBar"
+          ref={this.processBarRef}
           css={css`
             position: fixed;
             top: calc(100vh - 4px);