fix: save

README.md

@@ -6,3 +6,24 @@ Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+[
+{
+"type": "from",
+"animation": {
+"y": 75,
+"autoAlpha": 0
+},
+"start": 0.03,
+"end": 0.04
+},
+{
+"type": "to",
+"animation": {
+"y": -75,
+"autoAlpha": 0
+},
+"start": 0.0725,
+"end": 0.08249999999999999
+}
+]

src/App.jsx

@@ -3,12 +3,16 @@ import { gsap, ScrollTrigger } from "gsap/all";
 import { Action } from "./action";
 import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
-import TimeLineText from "./components/TimeLineText";
+import {
+  TimeLineText,
+  TimeLinePureText,
+  TimeLineWallText,
+} from "./components/TimeLineText";
+
 import { css } from "@emotion/react";
 
 import { useControls } from "leva";
-// import "./App.css";
-// gsap.registerPlugin(useGSAP);
+
 gsap.registerPlugin(ScrollTrigger);
 
 ScrollTrigger.config({
@@ -44,10 +48,9 @@ function App() {
           "--cl",
           "".concat(cHeight, "px")
         );
-        debugger
       console.log("fresh");
-      ScrollTrigger.refresh();
-      // ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
+      // ScrollTrigger.refresh();
+      ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
     }, 100);
   };
   useEffect(() => {
@@ -59,6 +62,7 @@ function App() {
   return (
     <div ref={container}>
       <Opening></Opening>
+
       <Viewer
         name="Lion Render"
         path="lion-render-10fps-873-rev1"
@@ -101,6 +105,52 @@ function App() {
             对古代美索不达米亚人来说，礼拜是日常生活的一部分。
           </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;
+              text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
+            `}
+          >
+            <div>迈步狮纹镶板</div>
+            <div>公元前605-562年</div>
+            <div>涂釉陶瓷</div>
+          </div>
+
+          {/* <div><i>迈步狮纹镶板</i>，新巴比伦时期，公元前605-562年，涂釉陶瓷。大都会艺术博物馆，Fletcher Fund，1931 (31.13.1)。©大都会艺术博物馆版权所有</div> */}
+        </TimeLineWallText>
       </Viewer>
 
       <Viewer

src/components/TimeLineText.jsx

@@ -1,31 +1,103 @@
 import { Component, createRef } from "react";
 import gsap from "gsap";
 import PropTypes from "prop-types";
+import { Action } from "../action";
 import { css } from "@emotion/react";
 
-export default class TimeLineText extends Component {
-  constructor(props) {
+export function TimeLinePureText(props) {
+  const progressPosition = props.progressPosition
+    ? props.progressPosition
+    : 0.5;
+  const fade = props.fade || 0.04;
+  const duration = props.duration || 0.1;
+  const verticalOffset = props.verticalOffset || "50vh";
+  const keyframes = [
+    Object.assign({}, Action.fadeUp, {
+      start: progressPosition,
+      end: progressPosition + fade,
+    }),
+    Object.assign({}, Action.fadeDown, {
+      start: progressPosition + duration + fade,
+      end: progressPosition + duration + fade + fade,
+    }),
+  ];
+
+  console.log("keyframes", keyframes);
+  return (
+    <TimeLineText
+      trigger={Action.scrubPin}
+      keyframes={keyframes}
+      verticalOffset={verticalOffset}
+      className={props.className}
+      parentHeight={props.parentHeight}
+      progressPosition={props.progressPosition}
+      style={props.style}
+    >
+      {props.children}
+    </TimeLineText>
+  );
+}
+export function TimeLineWallText(props) {
+  const progressPosition =
+    void 0 !== props.progressPosition ? props.progressPosition : 0.5;
+  const fade = props.fade || 0.025;
+  const duration = props.duration || 0.05;
+  const verticalOffset = props.verticalOffset || "46.5vh";
+
+  const keyframes = [
+    Object.assign({}, Action.fadeIn, {
+      start: progressPosition,
+      end: progressPosition + fade,
+    }),
+    Object.assign({}, Action.fadeOut, {
+      start: progressPosition + duration + fade,
+      end: progressPosition + duration + fade + fade,
+    }),
+  ];
+
+  return (
+    <TimeLineText
+      trigger={Action.scrubPin}
+      keyframes={keyframes}
+      verticalOffset={verticalOffset}
+      className={props.className}
+      parentHeight={props.parentHeight}
+      style={props.style}
+      progressPosition={props.progressPosition}
+      {...props}
+    >
+      {props.children}
+    </TimeLineText>
+  );
+}
+
+export class TimeLineText extends Component {
+  constructor() {
     super();
     this.containerRef = createRef();
     this.timeline = false;
     this.top = 0;
-    this.init(props);
+    this.keyframes = [];
+    this.trigger = false;
   }
   init(props) {
     console.log("props", props);
   }
   componentWillUnmount() {
-    console.error("remove-timeline");
     if (this.timeline) {
+      console.error("remove-timeline");
       this.timeline.kill(true);
       this.timeline = false;
     }
   }
+
   componentDidMount() {
     if (this.props.keyframes && this.props.trigger) {
-      // var n = this.props.keyframes[0].start;
-      // this.setTop(n);
+      var n = this.props.keyframes[0].start || 0;
+      this.setTop(n);
       this.createTimeLine();
+    } else {
+      this.props.progressPosition && this.setTop(this.props.progressPosition);
     }
   }
   setTop(height) {
@@ -34,7 +106,6 @@ export default class TimeLineText extends Component {
       ((height * window.innerHeight * ((parentHeight - 100) / 100)) /
         ((window.innerHeight * parentHeight) / 100)) *
       100;
-    // debugger;
     this.top = lastHeight + "%";
     console.log("this.top", this.top);
   }
@@ -51,10 +122,12 @@ export default class TimeLineText extends Component {
       const timeRes =
         (lastE - start) * (parseFloat(this.props.parentHeight) - 100);
       console.log("timeRes", timeRes);
+      debugger;
 
       this.timeline = gsap.timeline({
-        scrollTrigger: {
-          ...{
+        scrollTrigger: Object.assign(
+          {},
+          {
             trigger: this.containerRef.current,
             start: "top top",
             end: "+=" + timeRes + "%",
@@ -62,8 +135,8 @@ export default class TimeLineText extends Component {
               console.warn("onEnter");
             },
           },
-          ...this.props.trigger,
-        },
+          this.props.trigger
+        ),
       });
       for (var i = 0; i < this.props.keyframes.length; i += 1) {
         const cFrame = this.props.keyframes[i];
@@ -94,6 +167,19 @@ export default class TimeLineText extends Component {
     }
   }
 
+  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) + ")";
@@ -145,12 +231,21 @@ export default class TimeLineText extends Component {
 
 TimeLineText.propTypes = {
   verticalOffset: PropTypes.string,
-  children: PropTypes.object,
+  children: PropTypes.any,
   trigger: PropTypes.object,
   parentHeight: PropTypes.string,
   keyframes: PropTypes.arrayOf(PropTypes.object),
+  progressPosition: PropTypes.number,
 };
 
 TimeLineText.defaultProps = {
   verticalOffset: "100vh",
 };
+
+TimeLinePureText.propTypes = {
+  ...TimeLineText.propTypes,
+};
+
+TimeLineWallText.propTypes = {
+  ...TimeLineText.propTypes,
+};

src/components/Viewer.jsx

@@ -25,7 +25,7 @@ Viewer.propTypes = {
   exitTween: PropTypes.object,
   canvasSize: PropTypes.array,
   pause: PropTypes.object,
-  children: PropTypes.object,
+  children: PropTypes.any,
   debug: PropTypes.bool,
 };