save: save

.env.development

@@ -1,2 +1,2 @@
 VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
-VITE_APP_DEBUG=0
+VITE_APP_DEBUG=1

src/App.jsx

@@ -1,21 +1,21 @@
 import { useRef, useEffect } from "react";
 import LazyLoad from "react-lazyload";
-import { useGSAP } from "@gsap/react";
+// import { useGSAP } from "@gsap/react";
 import { gsap, ScrollTrigger } from "gsap/all";
 import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
 // import "./App.css";
-gsap.registerPlugin(useGSAP);
+// gsap.registerPlugin(useGSAP);
 gsap.registerPlugin(ScrollTrigger);
 
 ScrollTrigger.config({
   autoRefreshEvents: "visibilitychange,DOMContentLoaded,load",
+  limitCallbacks: true,
 });
 
 let resizeTimer = null;
 
 function App() {
-  // const [count, setCount] = useState(0);
   const container = useRef();
   const handlerResize = () => {
     clearTimeout(resizeTimer);
@@ -33,8 +33,10 @@ function App() {
           "--cw",
           "".concat(width, "px")
         ),
-        document.documentElement.style.setProperty("--cl", "".concat(n, "px")),
-        ScrollTrigger.refresh();
+        document.documentElement.style.setProperty("--cl", "".concat(n, "px"));
+      console.log("fresh");
+      ScrollTrigger.refresh();
+      // ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
     }, 100);
   };
   useEffect(() => {
@@ -44,18 +46,24 @@ function App() {
 
   const pinForExit = {
     onLeave: function (e) {
-      console.warn("pinForExit-onLeave");
+      console.error("pinForExit-onLeave", e.trigger);
       gsap.set(e.trigger, {
         autoAlpha: 0,
       });
     },
     onEnterBack: function (e) {
-      console.warn("pinForExit-onLeave");
+      console.error("pinForExit-onEnterBack", e.trigger);
       gsap.set(e.trigger, {
         autoAlpha: 1,
       });
     },
   };
+  const crossFadeIn = {
+    duration: 0.5,
+    from: {
+      autoAlpha: 0,
+    },
+  };
 
   return (
     <div ref={container}>
@@ -63,9 +71,9 @@ function App() {
       <LazyLoad height={"1300vh"}>
         <Viewer
           name="Lion Render"
+          path="lion-render-10fps-873-rev1"
           height={"1300vh"}
           frameCount={300}
-          path="lion-render-10fps-873-rev1"
           pause={{
             298: 40,
           }}
@@ -73,24 +81,24 @@ function App() {
       </LazyLoad>
       <LazyLoad height={"400vh"}>
         <Viewer
+          height={"400vh"}
           name="Vessel Steadicam"
           path="vessel-steadi-10fps-873-rev1"
           frameCount={64}
-          enterTween={{
-            from: {
-              autoAlpha: 0,
-              y: 0,
-            },
-          }}
+          enterTween={crossFadeIn}
           exitTween={pinForExit}
         />
       </LazyLoad>
-      {/* <LazyLoad height={"1300vh"}>
-        <Viewer name="333" height={"1300vh"} />
+      <LazyLoad height={"800vh"}>
+        <Viewer
+          height={"800vh"}
+          name="Vessel Render"
+          path="vessel-render-10fps-873-rev1"
+          frameCount={125}
+          enterTween={crossFadeIn}
+          exitTween={pinForExit}
+        />
       </LazyLoad>
-      <LazyLoad height={"1300vh"}>
-        <Viewer name="444" height={"1300vh"} />
-      </LazyLoad> */}
     </div>
   );
 }

src/components/Opening.jsx

@@ -13,9 +13,9 @@ export default function Opening() {
   const containerRef = useRef();
   const TitleRef = useRef();
   const height = window.innerHeight;
-  //   const containerRef = useRef();
 
   useEffect(() => {
+    console.warn("containerRef.current", containerRef.current);
     gsap.set(containerRef.current.children, {
       autoAlpha: 0,
     });
@@ -24,24 +24,24 @@ 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.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 (
-    <div ref={containerRef} style={{ height: height }}>
+    <div ref={containerRef} style={{ height: height, overflow: "hidden" }}>
       <TopTitleWrapper ref={TitleRef}>美索不达米亚</TopTitleWrapper>
     </div>
   );

src/components/Viewer.jsx

@@ -2,7 +2,7 @@ import { Component, createRef } from "react";
 import PropTypes from "prop-types";
 import { gsap, ScrollTrigger } from "gsap/all";
 import { css } from "@emotion/react";
-const isDebug = Number(import.meta.env.VITE_APP_SOURCE) === 1;
+const isDebug = Number(import.meta.env.VITE_APP_DEBUG) === 1;
 console.log("isDebug", isDebug);
 export default class Viewer extends Component {
   constructor() {
@@ -37,6 +37,7 @@ export default class Viewer extends Component {
     this.width = 1552;
     this.height = 873;
     this.justScrolled = false;
+    this.lastProgress = false;
     this.isBelow = true;
     this.isAbove = false;
   }
@@ -80,7 +81,8 @@ export default class Viewer extends Component {
     if (!this.exitTimeline && this.props.exitTween) {
       this.initializeExitTween();
     }
-    ScrollTrigger.refresh();
+    ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
+    console.error("ScrollTrigger.getAll()", ScrollTrigger.getAll());
   }
 
   loadImage(index) {
@@ -140,17 +142,17 @@ export default class Viewer extends Component {
     this.context.imageSmoothingQuality = "high";
   }
   initializeTimeline() {
-    const openLoading = () => {
-      gsap.to(this.loadingWrap.current, {
-        autoAlpha: 1,
-      });
-    };
-    const closeLoading = () => {
-      gsap.to(this.loadingWrap.current, {
-        autoAlpha: 0,
-      });
-    };
-    closeLoading();
+    // const openLoading = () => {
+    //   gsap.to(this.loadingWrap.current, {
+    //     autoAlpha: 1,
+    //   });
+    // };
+    // const closeLoading = () => {
+    //   gsap.to(this.loadingWrap.current, {
+    //     autoAlpha: 0,
+    //   });
+    // };
+    // closeLoading();
     this.timeline = gsap.timeline({
       scrollTrigger: {
         trigger: this.containerRef.current,
@@ -160,30 +162,40 @@ export default class Viewer extends Component {
         end: "bottom bottom",
         ease: "none",
         markers: isDebug,
-        onUpdate: function (n) {
+        onUpdate: (trigger) => {
           //处理processloading
+          if (!this.lastProgress) {
+            this.lastProgress = trigger.progress;
+            // console.log("lastProgress", this.lastProgress);
+          } else {
+            if (this.lastProgress !== this.progress) {
+              this.justScrolled = true;
+              this.lastProgress = trigger.progress;
+            }
+          }
         },
         onScrubComplete: () => {
           this.justScrolled = true;
         },
         onEnter: () => {
-          closeLoading();
+          // closeLoading();
           this.isAbove = false;
           console.log("onEnter");
+          console.log(this.props.path, "onEnter");
         },
         onEnterBack: () => {
-          openLoading();
-          console.log("onEnterBack");
+          // openLoading();
+          console.log(this.props.path, "onEnterBack");
           this.isBelow = false;
         },
         onLeave: () => {
-          console.log("onLeave");
+          console.log(this.props.path, "onLeave");
           this.isAbove = true;
-          openLoading();
+          // openLoading();
         },
         onLeaveBack: () => {
-          console.log("onLeaveBack");
-          openLoading();
+          console.log(this.props.path, "onLeaveBack");
+          // openLoading();
           this.isBelow = true;
         },
       },
@@ -207,30 +219,53 @@ export default class Viewer extends Component {
 
   initializeEnterTween() {
     const duration = this.props.enterTween.duration || 1;
-    console.log("initializeEnterTween", duration, this.props.enterTween.pin);
+    let openPin = false;
+    console.warn("this.props.enterTween", this.props.enterTween);
     gsap.set(this.viewerRef.current, {
       yPercent: -100 * duration,
     });
-    if (this.props.enterTween.pin !== 0) {
-      console.warn("tutu", this.props.enterTween.pin);
-      this.enterTimeline = gsap.timeline({
-        scrollTrigger: {
-          trigger: this.viewerRef.current,
-          scrub: true,
-          pin: this.props.enterTween.pin,
-          start: function () {
-            return "top top";
+    if (void 0 !== this.props.enterTween.pin) {
+      openPin = this.props.enterTween.pin;
+    }
+
+    this.enterTimeline = gsap.timeline({
+      scrollTrigger: {
+        trigger: this.viewerRef.current,
+        scrub: true,
+        pin: openPin,
+        start: function () {
+          return "top top";
+        },
+        end: function () {
+          return "top top-=" + window.innerHeight * duration;
+        },
+      },
+    });
+    if (this.props.enterTween.to) {
+      this.enterTimeline.to(
+        this.viewerRef.current,
+        Object.assign(
+          {
+            ease: "none",
           },
-          end: function () {
-            return "top top-=" + window.innerHeight * duration;
+          this.props.enterTween.to
+        )
+      );
+    }
+    if (this.props.enterTween.from) {
+      this.enterTimeline.from(
+        this.viewerRef.current,
+        Object.assign(
+          {
+            ease: "none",
           },
-        },
-      });
+          this.props.enterTween.from
+        )
+      );
     }
   }
   initializeExitTween() {
     console.log(this.props.path, "initializing exit tween ");
-    console.warn("this.props.exitTween", this.props.exitTween);
     this.exitTimeline = gsap.timeline({
       scrollTrigger: {
         scrub: true,
@@ -247,6 +282,18 @@ export default class Viewer extends Component {
         },
       },
     });
+
+    if (this.props.exitTween.from) {
+      this.exitTimeline.from(
+        this.viewerRef.current,
+        Object.assign(
+          {
+            ease: "none",
+          },
+          this.props.exitTween.from
+        )
+      );
+    }
   }
 
   poolNewFrames(index) {
@@ -305,59 +352,57 @@ export default class Viewer extends Component {
     return (
       <>
         <div
+          className="processBar"
           css={css`
-            position: "relative";
-            margin: "auto";
-            textalign: "center";
-            pointerevents: "none";
-            maxwidth: "100vw";
+            position: fixed;
+            top: calc(100vh - 4px);
+            // top: calc(var(--vh, 1vh) * 100 - 4px);
+            left: 0;
+            width: 100vw;
+            max-width: 100%;
+            border-top: 1px solid rgba(33, 33, 44, 0.6);
+            background-color: rgba(17, 17, 34, 0.6);
+            height: 4px;
+            z-index: 9;
           `}
-          ref={this.containerRef}
-          style={{ height: this.props.height || "500vh" }}
         >
-          <div>{this.props.name}</div>
-          <div className="loading-wrap" ref={this.loadingWrap}></div>
-
           <div
             css={css`
-              position: fixed;
-              top: calc(100vh - 4px);
-              // top: calc(var(--vh, 1vh) * 100 - 4px);
+              position: absolute;
+              width: auto;
+              height: 4px;
               left: 0;
-              width: 100vw;
-              max-width: 100%;
-              border-top: 1px solid rgba(33, 33, 44, 0.6);
-              background-color: rgba(17, 17, 34, 0.6);
+              bottom: 0;
+              z-index: 10;
+              background-color: rgba(120, 120, 163, 0.33);
+            `}
+            ref={this.preProcessingRef}
+          ></div>
+          <div
+            css={css`
+              position: absolute;
+              width: auto;
               height: 4px;
-              z-index: 9;
+              left: 0;
+              bottom: 0;
+              z-index: 10;
+              background-color: hsla(0, 0%, 79.2%, 0.5);
             `}
-          >
-            <div
-              css={css`
-                position: absolute;
-                width: auto;
-                height: 4px;
-                left: 0;
-                bottom: 0;
-                z-index: 10;
-                background-color: rgba(120, 120, 163, 0.33);
-              `}
-              ref={this.preProcessingRef}
-            ></div>
-            <div
-              css={css`
-                position: absolute;
-                width: auto;
-                height: 4px;
-                left: 0;
-                bottom: 0;
-                z-index: 10;
-                background-color: hsla(0, 0%, 79.2%, 0.5);
-              `}
-              ref={this.processingRef}
-            ></div>
-          </div>
+            ref={this.processingRef}
+          ></div>
+        </div>
 
+        <div
+          css={css`
+            position: relative;
+            margin: auto;
+            text-align: center;
+            pointer-events: none;
+            max-width: 100vw;
+          `}
+          ref={this.containerRef}
+          style={{ height: this.props.height || "500vh" }}
+        >
           <div ref={this.viewerRef}>
             <div style={{ overflow: "hidden" }}>
               <canvas
@@ -365,6 +410,7 @@ export default class Viewer extends Component {
                   width: auto;
                   margin-left: 50%;
                   transform: translateX(-50%);
+                  height: 100vh;
                   height: calc(var(--vh, 1vh) * 100);
                 `}
                 ref={this.canvasRef}

src/index.css

@@ -7,24 +7,13 @@
   color: rgba(255, 255, 255, 0.87); */
   background-color: #000;
   font-size: 1rem;
-  color-scheme: light dark;
+  /* color-scheme: light dark; */
   /* font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; */
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-* {
-  box-sizing: border-box;
-}
 
 html,
 body {
@@ -34,6 +23,7 @@ body {
   overflow-y: auto;
   margin: 0;
   padding: 0;
+  color:#dae0e0;
 }
 
 h1 {