fix: save

src/App copy.jsx

@@ -5,7 +5,7 @@ import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
 import {
   TimeLineText,
-  TimeLinePureText,
+  TimeLineLabelText,
   TimeLineWallText,
 } from "./components/TimeLineText";
 
@@ -101,7 +101,7 @@ function App() {
             </div>
           </TimeLineText>
 
-          <TimeLinePureText
+          <TimeLineLabelText
             parentHeight={"1300vh"}
             duration={0.0325}
             fade={0.01}
@@ -122,7 +122,7 @@ function App() {
             >
               各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
             </div>
-          </TimeLinePureText>
+          </TimeLineLabelText>
 
           <TimeLineWallText
             className={"wall-text"}
@@ -152,7 +152,7 @@ function App() {
             </div>
           </TimeLineWallText>
 
-          <TimeLinePureText
+          <TimeLineLabelText
             parentHeight={"1300vh"}
             fade={0.01}
             verticalOffset={"63vh"}
@@ -177,7 +177,7 @@ function App() {
                 Gate)，连接这座城市的宫殿及主要神庙。
               </div>
             </div>
-          </TimeLinePureText>
+          </TimeLineLabelText>
         </>
       </Viewer>
 

src/App.jsx

@@ -3,11 +3,14 @@ import { gsap, ScrollTrigger } from "gsap/all";
 import { Action } from "./action";
 import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
+import RichText from "./components/RichText";
+import mapJpg from "./assets/meso-map-chinese-simplified.jpg";
 import {
   TimeLineTitleText,
-  TimeLinePureText,
+  TimeLineLabelText,
   TimeLineWallText,
   ButtonText,
+  TimeLineTransText,
 } from "./components/TimeLineText";
 
 import { css } from "@emotion/react";
@@ -100,7 +103,11 @@ function App() {
           </div>
         </TimeLineTitleText>
 
-        <TimeLinePureText duration={0.0325} fade={0.01} progressPosition={0.03}>
+        <TimeLineLabelText
+          duration={0.0325}
+          fade={0.01}
+          progressPosition={0.03}
+        >
           <div
             css={css`
               font-weight: 300;
@@ -116,7 +123,7 @@ function App() {
           >
             各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
           </div>
-        </TimeLinePureText>
+        </TimeLineLabelText>
 
         <TimeLineWallText className={"wall-text"} progressPosition={0.125}>
           <div
@@ -147,7 +154,7 @@ function App() {
           </div>
         </TimeLineWallText>
 
-        <TimeLinePureText
+        <TimeLineLabelText
           fade={0.01}
           verticalOffset={"63vh"}
           progressPosition={0.25}
@@ -171,9 +178,9 @@ function App() {
               Gate)，连接这座城市的宫殿及主要神庙。
             </div>
           </div>
-        </TimeLinePureText>
+        </TimeLineLabelText>
 
-        <TimeLinePureText
+        <TimeLineLabelText
           fade={0.01}
           verticalOffset={"63vh"}
           progressPosition={0.45}
@@ -196,7 +203,7 @@ function App() {
               研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。
             </div>
           </div>
-        </TimeLinePureText>
+        </TimeLineLabelText>
         <TimeLineTitleText
           trigger={Action.scrubPin}
           verticalOffset={"0vh"}
@@ -218,6 +225,7 @@ function App() {
               justify-content: center;
               position: relative;
               z-index: 10;
+              margin-top: -40px;
               padding: 100px 40px;
               align-items: center;
               direction: var(--text-direction);
@@ -239,6 +247,62 @@ function App() {
         </TimeLineTitleText>
       </Viewer>
 
+      <RichText height={1276}>
+        <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);
+            flex-direction: column;
+            height: 1276px;
+            margin-top: -40vh;
+          `}
+        >
+          <TimeLineTransText>
+            <div
+              css={css`
+                width: 750px;
+                margin: 0 auto;
+              `}
+            >
+              <img
+                src={mapJpg}
+                css={css`
+                  width: 750px;
+                  height: 600px;
+                `}
+              />
+              <br />
+              <ButtonText>
+                <div>
+                  地图由FNSP根据原作改编，© FNSP版权所有。Sciences Po–Atelier de
+                  cartographie，2016年，由Martin
+                  Sauvage指导（法国国家科学研究中心，USR 3225，Nanterre）
+                </div>
+              </ButtonText>
+            </div>
+          </TimeLineTransText>
+          <TimeLineTransText>
+            <div
+              css={css`
+                font-size: 25px;
+                font-weight: 300;
+                line-height: 2;
+                max-width: 750px;
+                margin: 20px auto 100px;
+              `}
+            >
+              约公元前4000年，古美索不达米亚（即如今的伊拉克）是城市生活最早形成的发源地。美索不达米亚人在数学、科学及法律方面取得了进步；创作文学、建筑及艺术作品；以及发明了世界上第一个文字系统。
+            </div>
+          </TimeLineTransText>
+        </div>
+      </RichText>
       <Viewer
         height={"400vh"}
         name="Vessel Steadicam"

src/components/RichText.jsx

@@ -0,0 +1,14 @@
+import LazyLoad from "react-lazyload";
+import PropTypes from "prop-types";
+
+export default function RichText(props) {
+  return (
+    <LazyLoad height={props.height} offset={1e4}>
+      {props.children}
+    </LazyLoad>
+  );
+}
+RichText.propTypes = {
+  height: PropTypes.number,
+  children: PropTypes.any,
+};

src/components/TimeLineText.jsx

@@ -5,6 +5,42 @@ import { Action } from "../action";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
+export function TimeLineTransText(props) {
+  const containerRef = useRef();
+
+  const from = props.from || {
+    autoAlpha: 0,
+    y: 100,
+  };
+  const start = props.start || "top bottom";
+  const end = props.end || "top center+=10%";
+  useEffect(() => {
+    gsap.from(
+      containerRef.current,
+      Object.assign(
+        from,
+        {},
+        {
+          scrollTrigger: {
+            scrub: 0.2,
+            trigger: containerRef.current,
+            start: start,
+            end: end,
+          },
+        }
+      )
+    );
+  });
+
+  return <div ref={containerRef}>{props.children}</div>;
+}
+TimeLineTransText.propTypes = {
+  start: PropTypes.string,
+  end: PropTypes.string,
+  from: PropTypes.object,
+  children: PropTypes.any,
+};
+
 export function ButtonText(props) {
   const containerRef = useRef();
   const contentRef = useRef();
@@ -111,7 +147,7 @@ ButtonText.propTypes = {
   children: PropTypes.any,
 };
 
-export function TimeLinePureText(props) {
+export function TimeLineLabelText(props) {
   const progressPosition =
     void 0 !== props.progressPosition ? props.progressPosition : 0.5;
   const fade = props.fade || 0.04;
@@ -137,7 +173,7 @@ export function TimeLinePureText(props) {
       }
     ),
   ];
-  // console.log("keyframes-TimeLinePureText", keyframes);
+  // console.log("keyframes-TimeLineLabelText", keyframes);
   return (
     <TimeLineText
       trigger={Action.scrubPin}
@@ -364,7 +400,7 @@ TimeLineText.defaultProps = {
 TimeLineTitleText.propTypes = {
   ...TimeLineText.propTypes,
 };
-TimeLinePureText.propTypes = {
+TimeLineLabelText.propTypes = {
   ...TimeLineText.propTypes,
 };