fix: save

src/App.jsx

@@ -4,9 +4,10 @@ import { Action } from "./action";
 import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
 import {
-  TimeLineText,
+  TimeLineTitleText,
   TimeLinePureText,
   TimeLineWallText,
+  ButtonText,
 } from "./components/TimeLineText";
 
 import { css } from "@emotion/react";
@@ -73,15 +74,15 @@ function App() {
           298: 40,
         }}
       >
-        <TimeLineText
+        <TimeLineTitleText
           trigger={Action.scrubPin}
           verticalOffset={"33vh"}
           keyframes={[
-            Object.assign(Action.visible, {
+            Object.assign({}, Action.visible, {
               start: 0,
               end: 0,
             }),
-            Object.assign(Action.fadeDown, {
+            Object.assign({}, Action.fadeDown, {
               start: 0.02,
               end: 0.03,
             }),
@@ -97,7 +98,7 @@ function App() {
           >
             对古代美索不达米亚人来说，礼拜是日常生活的一部分。
           </div>
-        </TimeLineText>
+        </TimeLineTitleText>
 
         <TimeLinePureText duration={0.0325} fade={0.01} progressPosition={0.03}>
           <div
@@ -138,6 +139,11 @@ function App() {
             </div>
             <div>公元前605-562年</div>
             <div>涂釉陶瓷</div>
+            <ButtonText>
+              <i>迈步狮纹镶板</i>
+              ，新巴比伦时期，公元前605-562年，涂釉陶瓷。大都会艺术博物馆，Fletcher
+              Fund，1931 (31.13.1)。©大都会艺术博物馆版权所有{" "}
+            </ButtonText>
           </div>
         </TimeLineWallText>
 
@@ -163,10 +169,74 @@ function App() {
               在巴比伦最重要的街道Processional
               Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
               Gate)，连接这座城市的宫殿及主要神庙。
-              
             </div>
           </div>
         </TimeLinePureText>
+
+        <TimeLinePureText
+          fade={0.01}
+          verticalOffset={"63vh"}
+          progressPosition={0.45}
+        >
+          <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>
+              四维时代致力于人工智能三维数字化技术的.
+              研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。
+            </div>
+          </div>
+        </TimeLinePureText>
+        <TimeLineTitleText
+          trigger={Action.scrubPin}
+          verticalOffset={"0vh"}
+          keyframes={[
+            Object.assign({}, Action.fadeUp, {
+              start: 0.72,
+              end: 0.77,
+            }),
+            Object.assign({}, Action.visible, {
+              start: 0.9,
+              end: 1,
+            }),
+          ]}
+        >
+          <div
+            css={css`
+              display: flex;
+              min-height: calc(var(--vh, 1vh) * 100);
+              justify-content: center;
+              position: relative;
+              z-index: 10;
+              padding: 100px 40px;
+              align-items: center;
+              direction: var(--text-direction);
+              text-align: var(--alignment);
+            `}
+          >
+            <div
+              css={css`
+                font-size: 25px;
+                font-weight: 300;
+                line-height: 2;
+                max-width: 750px;
+                margin: -20px auto 100px;
+              `}
+            >
+              这是盖蒂别墅博物馆在2021年与卢浮宫博物馆合作举办的关于古美索不达米亚的大型展览中展出的130多件展品之一。这些展品囊括了美索不达米亚城邦、文字及王国于约三千年的发展。
+            </div>
+          </div>
+        </TimeLineTitleText>
       </Viewer>
 
       <Viewer

src/components/TimeLineText.jsx

@@ -1,8 +1,115 @@
-import { Component, createRef } from "react";
-import { gsap, ScrollTrigger } from "gsap/all";
+import { Component, createRef, useRef, useEffect } from "react";
+import gsap from "gsap";
 import PropTypes from "prop-types";
 import { Action } from "../action";
 import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export function ButtonText(props) {
+  const containerRef = useRef();
+  const contentRef = useRef();
+  const ButtonRef = useRef();
+  let isOpen = false;
+  useEffect(() => {
+    gsap.set(contentRef.current, {
+      autoAlpha: 0,
+    });
+  });
+
+  const handlerClick = () => {
+    if (!isOpen) {
+      gsap.to(contentRef.current, {
+        autoAlpha: 1,
+      });
+      isOpen = true;
+      ButtonRef.current.classList.add("open");
+      ButtonRef.current.innerText = "x";
+    } else {
+      gsap.to(contentRef.current, {
+        autoAlpha: 0,
+      });
+      isOpen = false;
+      ButtonRef.current.innerText = "+";
+      ButtonRef.current.classList.remove("open");
+    }
+  };
+
+  const Warpper = styled.div`
+    display: flex;
+    position: relative;
+    align-items: center;
+    margin-top: 12px;
+    z-index: 10;
+  `;
+
+  const ButtonWrapper = styled.button`
+    appearance: none;
+    position: relative;
+    font-size: 10px;
+    border: none;
+    margin: 0;
+    align-self: start;
+    outline: none;
+    padding: 0;
+    color: #000;
+    background-color: transparent;
+    height: 20px;
+    width: 20px;
+    min-width: 20px;
+    border-radius: 2px;
+    cursor: pointer;
+    opacity: 1;
+    pointer-events: all;
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      background-color: hsla(0, 0%, 100%, 0.8);
+      transition: transform 0.25s ease-out;
+    }
+    &.open {
+      &:before {
+        transform: rotate(90deg);
+      }
+      &:after {
+        transform: rotate(180deg);
+      }
+    }
+    &:after {
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      margin-top: -2px;
+    }
+    &:before {
+      top: 0;
+      left: 50%;
+      width: 4px;
+      height: 100%;
+      margin-left: -2px;
+    }
+  `;
+
+  const TextWrapper = styled.div`
+    margin-left: 10px;
+    margin-right: 10px;
+    font-size: 12px;
+  `;
+
+  return (
+    <Warpper ref={containerRef}>
+      <ButtonWrapper ref={ButtonRef} onClick={handlerClick}>
+        +
+      </ButtonWrapper>
+      <TextWrapper ref={contentRef}>{props.children}</TextWrapper>
+    </Warpper>
+  );
+}
+ButtonText.propTypes = {
+  content: PropTypes.string,
+  children: PropTypes.any,
+};
 
 export function TimeLinePureText(props) {
   const progressPosition =
@@ -30,7 +137,7 @@ export function TimeLinePureText(props) {
       }
     ),
   ];
-  console.log("keyframes-TimeLinePureText", keyframes);
+  // console.log("keyframes-TimeLinePureText", keyframes);
   return (
     <TimeLineText
       trigger={Action.scrubPin}
@@ -62,7 +169,7 @@ export function TimeLineWallText(props) {
       end: progressPosition + duration + fade + fade,
     }),
   ];
-  console.log("keyframes-TimeLineWallText", keyframes);
+  // console.log("keyframes-TimeLineWallText", keyframes);
 
   return (
     <TimeLineText
@@ -78,8 +185,13 @@ export function TimeLineWallText(props) {
     </TimeLineText>
   );
 }
-
-export class TimeLineText extends Component {
+export function TimeLineTitleText(props) {
+  const verticalOffset = props.verticalOffset || "100vh";
+  return (
+    <TimeLineText verticalOffset={verticalOffset} {...props}></TimeLineText>
+  );
+}
+class TimeLineText extends Component {
   constructor(props) {
     super();
     this.containerRef = createRef();
@@ -95,6 +207,7 @@ export class TimeLineText extends Component {
     this.props = props;
     if (props.trigger && props.keyframes) {
       var top = props.keyframes[0].start;
+
       this.setTop(top);
     } else {
       if (this.props.progressPosition) {
@@ -187,7 +300,7 @@ export class TimeLineText extends Component {
     }
   }
   render() {
-    const top =
+    const marginTop =
       "calc(var(--vh, 1vh) *" + parseFloat(this.props.verticalOffset) + ")";
 
     return (
@@ -223,7 +336,7 @@ export class TimeLineText extends Component {
             <div
               className="text-wrapper"
               css={css`
-                margin-top: ${top};
+                margin-top: ${marginTop};
               `}
             >
               {this.props.children}
@@ -248,6 +361,9 @@ TimeLineText.defaultProps = {
   verticalOffset: "100vh",
 };
 
+TimeLineTitleText.propTypes = {
+  ...TimeLineText.propTypes,
+};
 TimeLinePureText.propTypes = {
   ...TimeLineText.propTypes,
 };

src/view/index.jsx

@@ -0,0 +1,3 @@
+export default function MainView() {
+  return <></>;
+}