update

src/App copy.jsx

@@ -0,0 +1,314 @@
+import { useRef, useEffect } from "react";
+import { gsap, ScrollTrigger } from "gsap/all";
+import { Action } from "./action";
+import Opening from "./components/Opening";
+import Viewer from "./components/Viewer";
+import {
+  TimeLineText,
+  TimeLinePureText,
+  TimeLineWallText,
+} from "./components/TimeLineText";
+
+import { css } from "@emotion/react";
+
+import { useControls } from "leva";
+
+gsap.registerPlugin(ScrollTrigger);
+
+ScrollTrigger.config({
+  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load",
+  // limitCallbacks: true,
+});
+
+let resizeTimer = null;
+
+function App() {
+  const container = useRef();
+  const { debug } = useControls({ debug: false });
+  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";
+  });
+
+  return (
+    <div ref={container}>
+      <Opening></Opening>
+
+      <Viewer
+        name="Lion Render"
+        path="lion-render-10fps-873-rev1"
+        height={"1300vh"}
+        frameCount={300}
+        debug={debug}
+        pause={{
+          298: 40,
+        }}
+      >
+        <>
+          <TimeLineText
+            trigger={Action.scrubPin}
+            parentHeight={"1300vh"}
+            verticalOffset={"33vh"}
+            keyframes={[
+              Object.assign(Action.visible, {
+                start: 0,
+                end: 0,
+              }),
+              Object.assign(Action.fadeDown, {
+                start: 0.02,
+                end: 0.03,
+              }),
+            ]}
+          >
+            <div
+              css={css`
+                font-weight: 300;
+                font-size: 2.75vw;
+                width: 100%;
+                text-align: center;
+              `}
+            >
+              对古代美索不达米亚人来说，礼拜是日常生活的一部分。
+            </div>
+          </TimeLineText>
+
+          <TimeLinePureText
+            parentHeight={"1300vh"}
+            duration={0.0325}
+            fade={0.01}
+            progressPosition={0.03}
+          >
+            <div
+              css={css`
+                font-weight: 300;
+                font-size: 18px;
+                width: 50%;
+                max-width: 600px;
+                padding: 8px 12px;
+                margin-right: 20px;
+                margin-left: auto;
+                background: rgba(0, 0, 0, 0.7);
+                border-radius: 2px;
+              `}
+            >
+              各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
+            </div>
+          </TimeLinePureText>
+
+          <TimeLineWallText
+            className={"wall-text"}
+            parentHeight={"1300vh"}
+            progressPosition={0.125}
+          >
+            <div
+              css={css`
+                width: 35%;
+                padding-left: 32px;
+                padding-right: 32px;
+                z-index: 25;
+                font-size: 24px;
+                line-height: 1.66;
+                text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
+              `}
+            >
+              <div
+                css={css`
+                  font-size: 30px;
+                `}
+              >
+                迈步狮纹镶板
+              </div>
+              <div>公元前605-562年</div>
+              <div>涂釉陶瓷</div>
+            </div>
+          </TimeLineWallText>
+
+          <TimeLinePureText
+            parentHeight={"1300vh"}
+            fade={0.01}
+            verticalOffset={"63vh"}
+            progressPosition={0.03}
+          >
+            <div
+              css={css`
+                font-weight: 300;
+                font-size: 18px;
+                width: 50%;
+                max-width: 600px;
+                padding: 8px 12px;
+                margin-right: 20px;
+                margin-left: auto;
+                background: rgba(0, 0, 0, 0.7);
+                border-radius: 2px;
+              `}
+            >
+              <div>
+                在巴比伦最重要的街道Processional
+                Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
+                Gate)，连接这座城市的宫殿及主要神庙。
+              </div>
+            </div>
+          </TimeLinePureText>
+        </>
+      </Viewer>
+
+      <Viewer
+        height={"400vh"}
+        name="Vessel Steadicam"
+        path="vessel-steadi-10fps-873-rev1"
+        frameCount={64}
+        debug={debug}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"800vh"}
+        name="Vessel Render"
+        path="vessel-render-10fps-873-rev1"
+        frameCount={125}
+        debug={debug}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"400vh"}
+        name="Michaux Steadicam"
+        path="michaux-steadi-10fps-873-rev1"
+        frameCount={98}
+        debug={debug}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"800vh"}
+        name="Michaux Render"
+        path="michaux-render-10fps-873-rev1"
+        frameCount={158}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"400vh"}
+        name="Gudea Architect Steadi"
+        path="gudea-architect-steadi-10fps-873-rev1"
+        frameCount={84}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+      <Viewer
+        height={"800vh"}
+        name="Gudea Architect Render"
+        path="gudea-architect-render-10fps-873-rev1"
+        frameCount={201}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"800vh"}
+        name="Dictionary Steadi"
+        path="dictionary-steadi-10fps-873-rev1"
+        frameCount={258}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"300vh"}
+        name="Dictionary Render"
+        path="dictionary-steadi-10fps-873-rev1"
+        frameCount={45}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"200h"}
+        name="Enheduanna Steadi"
+        path="enheduanna-steadi-10fps-873-rev1"
+        frameCount={40}
+        pause={{
+          1: 80,
+        }}
+        enterTween={{
+          from: {
+            autoAlpha: 0,
+            y: 500,
+          },
+        }}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"800vh"}
+        name="Cone Steadi"
+        path="cone-steadi-10fps-873-rev1"
+        frameCount={256}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"600vh"}
+        name="Cone Render"
+        path="cone-render-10fps-873-rev1"
+        frameCount={50}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"280vh"}
+        name="Gudea Steadi"
+        path="gudea-steadi-10fps-873-rev1"
+        frameCount={50}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+
+      <Viewer
+        height={"900vh"}
+        name="Gudea Render"
+        path="gudea-render-10fps-873-rev1"
+        frameCount={184}
+        enterTween={Action.crossFadeIn}
+        exitTween={Action.pinForExit}
+      />
+    </div>
+  );
+}
+
+export default App;

src/App.jsx

@@ -73,84 +73,112 @@ function App() {
           298: 40,
         }}
       >
-        <TimeLineText
-          trigger={Action.scrubPin}
-          parentHeight={"1300vh"}
-          verticalOffset={"33vh"}
-          keyframes={[
-            {
-              ...Action.visible,
-              ...{
+        <>
+          <TimeLineText
+            trigger={Action.scrubPin}
+            parentHeight={"1300vh"}
+            verticalOffset={"33vh"}
+            keyframes={[
+              Object.assign(Action.visible, {
                 start: 0,
                 end: 0,
-              },
-            },
-            {
-              ...Action.fadeDown,
-              ...{
+              }),
+              Object.assign(Action.fadeDown, {
                 start: 0.02,
                 end: 0.03,
-              },
-            },
-          ]}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 2.75vw;
-              width: 100%;
-              text-align: center;
-            `}
+              }),
+            ]}
           >
-            对古代美索不达米亚人来说，礼拜是日常生活的一部分。
-          </div>
-        </TimeLineText>
+            <div
+              css={css`
+                font-weight: 300;
+                font-size: 2.75vw;
+                width: 100%;
+                text-align: center;
+              `}
+            >
+              对古代美索不达米亚人来说，礼拜是日常生活的一部分。
+            </div>
+          </TimeLineText>
 
-        <TimeLinePureText
-          parentHeight={"1300vh"}
-          duration={0.0325}
-          fade={0.01}
-          progressPosition={0.03}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 600px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
+          <TimeLinePureText
+            parentHeight={"1300vh"}
+            duration={0.0325}
+            fade={0.01}
+            progressPosition={0.03}
           >
-            各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
-          </div>
-        </TimeLinePureText>
+            <div
+              css={css`
+                font-weight: 300;
+                font-size: 18px;
+                width: 50%;
+                max-width: 600px;
+                padding: 8px 12px;
+                margin-right: 20px;
+                margin-left: auto;
+                background: rgba(0, 0, 0, 0.7);
+                border-radius: 2px;
+              `}
+            >
+              各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
+            </div>
+          </TimeLinePureText>
 
-        <TimeLineWallText
-          className={"wall-text"}
-          parentHeight={"1300vh"}
-          progressPosition={0.125}
-        >
-          <div
-            css={css`
-              width: 35%;
-              padding-left: 32px;
-              padding-right: 32px;
-              z-index: 25;
-              font-size: 24px;
-              text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
-            `}
+          <TimeLineWallText
+            className={"wall-text"}
+            parentHeight={"1300vh"}
+            progressPosition={0.125}
           >
-            <div>迈步狮纹镶板</div>
-            <div>公元前605-562年</div>
-            <div>涂釉陶瓷</div>
-          </div>
+            <div
+              css={css`
+                width: 35%;
+                padding-left: 32px;
+                padding-right: 32px;
+                z-index: 25;
+                font-size: 24px;
+                line-height: 1.66;
+                text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
+              `}
+            >
+              <div
+                css={css`
+                  font-size: 30px;
+                `}
+              >
+                迈步狮纹镶板
+              </div>
+              <div>公元前605-562年</div>
+              <div>涂釉陶瓷</div>
+            </div>
+          </TimeLineWallText>
 
-          {/* <div><i>迈步狮纹镶板</i>，新巴比伦时期，公元前605-562年，涂釉陶瓷。大都会艺术博物馆，Fletcher Fund，1931 (31.13.1)。©大都会艺术博物馆版权所有</div> */}
-        </TimeLineWallText>
+          <TimeLinePureText
+            parentHeight={"1300vh"}
+            fade={0.01}
+            verticalOffset={"63vh"}
+            progressPosition={0.03}
+          >
+            <div
+              css={css`
+                font-weight: 300;
+                font-size: 18px;
+                width: 50%;
+                max-width: 600px;
+                padding: 8px 12px;
+                margin-right: 20px;
+                margin-left: auto;
+                background: rgba(0, 0, 0, 0.7);
+                border-radius: 2px;
+              `}
+            >
+              <div>
+                在巴比伦最重要的街道Processional
+                Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
+                Gate)，连接这座城市的宫殿及主要神庙。
+              </div>
+            </div>
+          </TimeLinePureText>
+        </>
       </Viewer>
 
       <Viewer

src/components/TimeLineText.jsx

@@ -22,7 +22,7 @@ export function TimeLinePureText(props) {
     }),
   ];
 
-  console.log("keyframes", keyframes);
+  console.log("keyframes-TimeLinePureText", keyframes);
   return (
     <TimeLineText
       trigger={Action.scrubPin}
@@ -54,6 +54,7 @@ export function TimeLineWallText(props) {
       end: progressPosition + duration + fade + fade,
     }),
   ];
+  console.log("keyframes-TimeLineWallText", keyframes);
 
   return (
     <TimeLineText
@@ -64,7 +65,7 @@ export function TimeLineWallText(props) {
       parentHeight={props.parentHeight}
       style={props.style}
       progressPosition={props.progressPosition}
-      {...props}
+      // {...props}
     >
       {props.children}
     </TimeLineText>
@@ -93,9 +94,9 @@ export class TimeLineText extends Component {
 
   componentDidMount() {
     if (this.props.keyframes && this.props.trigger) {
+      this.createTimeLine();
       var n = this.props.keyframes[0].start || 0;
       this.setTop(n);
-      this.createTimeLine();
     } else {
       this.props.progressPosition && this.setTop(this.props.progressPosition);
     }
@@ -115,24 +116,36 @@ export class TimeLineText extends Component {
       const start = this.props.keyframes[0].start;
       const end = this.props.keyframes[0].end;
       const dif = end - start;
-      const lastS = this.props.keyframes[this.props.keyframes.length - 1].start;
-      const lastE = this.props.keyframes[this.props.keyframes.length - 1].end;
-      const lDif = lastE - lastS;
-      const gapDiff = lastS - end;
+      const lastStart =
+        this.props.keyframes[this.props.keyframes.length - 1].start;
+      const lastEnd = this.props.keyframes[this.props.keyframes.length - 1].end;
+      const lDif = lastEnd - lastStart;
+      const gapDiff = lastStart - end;
       const timeRes =
-        (lastE - start) * (parseFloat(this.props.parentHeight) - 100);
+        (lastEnd - start) * (parseFloat(this.props.parentHeight) - 100);
       console.log("timeRes", timeRes);
-      debugger;
+
+      // var t = this.props.keyframes[0].start,
+      // n = this.props.keyframes[0].end,
+      // r = n - t,
+      // a =
+      //   this.props.keyframes[this.props.keyframes.length - 1]
+      //     .start,
+      // i =
+      //   this.props.keyframes[this.props.keyframes.length - 1].end,
+      // o = i - a,
+      // l = a - n,
+      // s = (i - t) * (parseFloat(this.props.parentHeight) - 100),
+      // debugger;
 
       this.timeline = gsap.timeline({
         scrollTrigger: Object.assign(
-          {},
           {
             trigger: this.containerRef.current,
             start: "top top",
             end: "+=" + timeRes + "%",
             onEnter: () => {
-              console.warn("onEnter");
+              // console.warn("onEnter");
             },
           },
           this.props.trigger
@@ -146,40 +159,33 @@ export class TimeLineText extends Component {
             duration: gapDiff,
           });
         if (cFrame.type === "set") {
-          this.timeline.set(this.containerRef.current, cFrame.animation);
+          this.timeline.set(
+            this.containerRef.current,
+            Object.assign({}, cFrame.animation)
+          );
         }
         if (cFrame.type === "from") {
-          this.timeline.from(this.containerRef.current, {
-            ...cFrame.animation,
-            ...{
+          this.timeline.from(
+            this.containerRef.current,
+            Object.assign({}, cFrame.animation, {
               duration: dif,
-            },
-          });
+            })
+          );
         } else {
-          this.timeline.to(this.containerRef.current, {
-            ...cFrame.animation,
-            ...{
-              duration: lDif,
-            },
-          });
+          this.timeline.to(
+            this.containerRef.current,
+            Object.assign(
+              Object.assign({}, cFrame.animation),
+              {},
+              {
+                duration: lDif,
+              }
+            )
+          );
         }
       }
     }
   }
-
-  createNormalTextTimeLine() {
-    console.log("createNormalTextTimeLine");
-    if (!this.timeline) {
-      this.timeline = gsap.timeline({
-        scrollTrigger: {
-          pin: true,
-          scrub: true,
-          trigger: this.containerRef.current,
-          start: "top top",
-        },
-      });
-    }
-  }
   render() {
     const top =
       "calc(var(--vh, 1vh) *" + parseFloat(this.props.verticalOffset) + ")";