fix: save

c1.js

@@ -1,506 +0,0 @@
-const no = (function (e) {
-  $i(a, e);
-  var t,
-    n,
-    r =
-      ((t = a),
-      (n = (function () {
-        if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
-        if (Reflect.construct.sham) return !1;
-        if ("function" == typeof Proxy) return !0;
-        try {
-          return (
-            Boolean.prototype.valueOf.call(
-              Reflect.construct(Boolean, [], function () {})
-            ),
-            !0
-          );
-        } catch (e) {
-          return !1;
-        }
-      })()),
-      function () {
-        var e,
-          r = Zi(t);
-        if (n) {
-          var a = Zi(this).constructor;
-          e = Reflect.construct(r, arguments, a);
-        } else e = r.apply(this, arguments);
-        return Ki(this, e);
-      });
-  function a(e) {
-    var t;
-    if (
-      (Gi(this, a),
-      ((t = r.call(this, e)).format = ".jpg"),
-      document.body.classList.contains("webp-supported") &&
-        (t.format = ".webp"),
-      document.body.classList.contains("avif-supported") &&
-        (t.format = ".avif"),
-      (t.containerRef = (0, i.createRef)(null)),
-      (t.viewerRef = (0, i.createRef)(null)),
-      (t.viewerOffsetRef = (0, i.createRef)(null)),
-      (t.canvasRef = (0, i.createRef)(null)),
-      (t.loadingWrap = (0, i.createRef)(null)),
-      (t.loadingProgress = (0, i.createRef)(null)),
-      (t.playHead = (0, i.createRef)(null)),
-      (t.playHeadProgress = (0, i.createRef)(null)),
-      (t.context = !1),
-      (t.width = 1552),
-      (t.height = 873),
-      t.props.canvasSize)
-    ) {
-      var n = c(t.props.canvasSize, 2);
-      (t.width = n[0]), (t.height = n[1]);
-    }
-    return (
-      (t.lastFrame = -1),
-      (t.floatFrame = 0),
-      (t.frame = t.props.startFrame || 0),
-      (t.fullFrameCount = t.props.frameCount),
-      (t.loadedCount = 0),
-      (t.loadComplete = !1),
-      (t.sequence = []),
-      (t.loadedRenderPool = []),
-      (t.loadedRenderTimeout = null),
-      (t.poolAnimateDelay = 40),
-      (t.timeline = !1),
-      (t.progress = 0),
-      t.props.pause &&
-        Object.keys(t.props.pause).forEach(function (e) {
-          t.fullFrameCount += t.props.pause[e];
-        }),
-      (t.enterTimeline = !1),
-      (t.exitTimeline = !1),
-      (t.notLoadedTween = {
-        isActive: !1,
-      }),
-      (t.isAbove = !1),
-      (t.isBelow = !0),
-      (t.lastProgress = !1),
-      (t.justScrolled = !1),
-      t
-    );
-  }
-  return (
-    Yi(a, [
-      {
-        key: "componentDidMount",
-        value: function () {
-          this.loadAssets(),
-            this.canvasRef.current && this.initializeContext(),
-            !this.enterTimeline &&
-              this.props.enterTween &&
-              this.initializeEnterTween(),
-            this.timeline || (this.initializeTimeline(), this.setTimeline()),
-            !this.exitTimeline &&
-              this.props.exitTween &&
-              this.initializeExitTween(),
-            Ci.refresh();
-        },
-      },
-      {
-        key: "getImagePath",
-        value: function (e) {
-          return (
-            "https://static.getty.edu/mesopotamia/" +
-            this.props.path +
-            "/" +
-            "".concat(e.toString().padStart(4, "0")) +
-            this.format
-          );
-        },
-      },
-      {
-        key: "loadAssets",
-        value: function () {
-          var e = this;
-          this.loadImage(1),
-            setTimeout(function () {
-              for (var t = 2; t <= e.props.frameCount; t += 1) e.loadImage(t);
-            }, 60);
-        },
-      },
-      {
-        key: "loadImage",
-        value: function (e) {
-          var t = this,
-            n = new Image();
-          if (
-            ((n.retried = 0),
-            (n.src = this.getImagePath(e)),
-            (n.ogSrc = n.src),
-            this.props.pause && e + "" in this.props.pause)
-          )
-            for (var r = this.props.pause[e]; r--; ) this.sequence.push(n);
-          this.sequence.push(n),
-            (n.onerror = function () {
-              var e = Math.floor(Date.now() * Math.random())
-                .toString()
-                .substring(0, 8);
-              n.retried < 2
-                ? setTimeout(function () {
-                    n.src = n.ogSrc + "?" + e;
-                  }, 80)
-                : n.retried < 3 &&
-                  setTimeout(function () {
-                    n.src = n.ogSrc.slice(0, -4) + ".jpg?" + e;
-                  }, 80),
-                n.retried++;
-            }),
-            (n.onload = function () {
-              1 === e && t.renderImageToCanvas(0),
-                t.frame > e &&
-                  t.timeline.scrollTrigger.isActive &&
-                  t.poolNewFrames(e - 1),
-                (t.loadedCount += 1),
-                (t.loadingProgress.current.style.width =
-                  (t.loadedCount / (parseFloat(t.props.frameCount) - 1)) * 100 +
-                  "%"),
-                t.loadedCount === parseFloat(t.props.frameCount) - 1 &&
-                  t.loadingComplete();
-            });
-        },
-      },
-      {
-        key: "loadingComplete",
-        value: function () {
-          console.log(this.props.path, "loading complete"),
-            (this.loadComplete = !0),
-            this.isAbove && this.renderImageToCanvas(this.loadedCount - 1);
-        },
-      },
-      {
-        key: "poolNewFrames",
-        value: function (e) {
-          this.loadedRenderPool.unshift(e),
-            this.loadedRenderPool.sort(function (e, t) {
-              return t - e;
-            }),
-            this.animatePool();
-        },
-      },
-      {
-        key: "animatePool",
-        value: function () {
-          var e = this;
-          !this.loadedRenderTimeout &&
-            this.loadedRenderPool.length &&
-            (this.loadedRenderTimeout = setTimeout(function () {
-              e.loadedRenderTimeout = !1;
-              var t = e.loadedRenderPool[e.loadedRenderPool.length - 1];
-              if (t <= e.frame) {
-                var n = e.loadedRenderPool.pop();
-                e.renderImageToCanvas(n), e.animatePool();
-              }
-              e.frame < t && (e.loadedRenderPool = []);
-            }, this.poolAnimateDelay));
-        },
-      },
-      {
-        key: "componentWillUnmount",
-        value: function () {
-          this.timeline && this.timeline.kill(!0);
-        },
-      },
-      {
-        key: "initializeContext",
-        value: function () {
-          (this.context = this.canvasRef.current.getContext("2d", {
-            alpha: !1,
-            desynchronized: !0,
-            powerPreference: "high-performance",
-          })),
-            (this.context.imageSmoothingEnabled = !0),
-            (this.context.imageSmoothingQuality = "high");
-        },
-      },
-      {
-        key: "initializeTimeline",
-        value: function () {
-          var e = this,
-            t = null,
-            n = function () {
-              ra.to(e.loadingWrap.current, {
-                autoAlpha: 1,
-              });
-            },
-            r = function () {
-              ra.to(e.loadingWrap.current, {
-                autoAlpha: 0,
-              });
-            };
-          r(),
-            (this.timeline = ra.timeline({
-              scrollTrigger: {
-                trigger: this.containerRef.current,
-                pin: this.viewerRef.current,
-                scrub: 0.66,
-                start: "top top",
-                end: "bottom bottom",
-                ease: "none",
-                markers: this.props.debug && false,
-                onUpdate: function (n) {
-                  e.props.debug,
-                    !1 === e.lastProgress && (e.lastProgress = n.progress),
-                    e.lastProgress !== n.progress &&
-                      ((e.justScrolled = !0),
-                      clearTimeout(t),
-                      (t = setTimeout(function () {
-                        e.frame > e.loadedCount &&
-                          !e.notLoadedTween.isActive &&
-                          (e.notLoadedTween = ra.to(e.loadingWrap.current, {
-                            backgroundColor: "#8888a0",
-                            duration: 0.33,
-                            repeat: 1,
-                            yoyo: !0,
-                          }));
-                      }, 100)),
-                      (e.lastProgress = n.progress));
-                },
-                onScrubComplete: function () {
-                  e.justScrolled = !1;
-                },
-                onEnter: function () {
-                  n(), (e.isAbove = !1);
-                },
-                onEnterBack: function () {
-                  n(), (e.isBelow = !1);
-                },
-                onLeave: function () {
-                  r(), (e.isAbove = !0);
-                },
-                onLeaveBack: function () {
-                  r(), (e.isBelow = !0);
-                },
-              },
-            }));
-        },
-      },
-      {
-        key: "setTimeline",
-        value: function () {
-          var e = this;
-          this.timeline.to(this, {
-            floatFrame: this.fullFrameCount - 1,
-            ease: "none",
-            onUpdate: function () {
-              (e.frame = Math.floor(e.floatFrame)),
-                e.lastFrame === e.frame ||
-                  e.loadedRenderPool.length ||
-                  e.renderImageToCanvas(e.frame);
-            },
-          });
-        },
-      },
-      {
-        key: "initializeEnterTween",
-        value: function () {
-          var e = this.props.enterTween.duration || 1;
-          ra.set(this.viewerRef.current, {
-            yPercent: -100 * e,
-          });
-          var t = !0;
-          if (
-            (void 0 !== this.props.enterTween.pin &&
-              (t = this.props.enterTween.pin),
-            (this.enterTimeline = ra.timeline({
-              scrollTrigger: {
-                trigger: this.viewerRef.current,
-                scrub: !0,
-                pin: t,
-                start: function () {
-                  return "top top";
-                },
-                end: function () {
-                  return "top top-=" + window.innerHeight * e;
-                },
-              },
-            })),
-            this.props.enterTween.to &&
-              this.enterTimeline.to(
-                this.viewerRef.current,
-                to(
-                  {
-                    ease: "none",
-                  },
-                  this.props.enterTween.to
-                )
-              ),
-            this.props.enterTween.from &&
-              this.enterTimeline.from(
-                this.viewerRef.current,
-                to(
-                  {
-                    ease: "none",
-                  },
-                  this.props.enterTween.from
-                )
-              ),
-            this.props.enterTween.fromTo)
-          ) {
-            var n = this.props.enterTween.fromTo[0],
-              r = this.props.enterTween.fromTo[1];
-            this.enterTimeline.fromTo(
-              this.viewerRef.current,
-              n,
-              to(
-                {
-                  ease: "none",
-                },
-                r
-              )
-            );
-          }
-        },
-      },
-      {
-        key: "initializeExitTween",
-        value: function () {
-          if (
-            (console.log(this.props.path, "initializing exit tween "),
-            (this.exitTimeline = ra.timeline({
-              scrollTrigger: {
-                scrub: !0,
-                trigger: this.containerRef.current,
-                pin: this.viewerRef.current,
-                onLeave: this.props.exitTween.onLeave,
-                onLeaveBack: this.props.exitTween.onLeaveBack,
-                onEnterBack: this.props.exitTween.onEnterBack,
-                start: function () {
-                  return "bottom bottom";
-                },
-                end: function () {
-                  return "bottom top";
-                },
-              },
-            })),
-            this.props.exitTween.to &&
-              this.exitTimeline.to(
-                this.viewerRef.current,
-                to(
-                  {
-                    ease: "none",
-                  },
-                  this.props.exitTween.to
-                )
-              ),
-            this.props.exitTween.from &&
-              this.exitTimeline.from(
-                this.viewerRef.current,
-                to(
-                  {
-                    ease: "none",
-                  },
-                  this.props.exitTween.from
-                )
-              ),
-            this.props.exitTween.fromTo)
-          ) {
-            var e = this.props.exitTween.fromTo[0],
-              t = this.props.exitTween.fromTo[1];
-            this.exitTimeline.fromTo(
-              this.viewerRef.current,
-              e,
-              to(
-                to({}, t),
-                {},
-                {
-                  ease: "none",
-                }
-              )
-            );
-          }
-        },
-      },
-      {
-        key: "renderImageToCanvas",
-        value: function (e) {
-          if (this.sequence[e])
-            if (this.context.drawImage) {
-              this.props.debug,
-                this.context.drawImage(this.sequence[e], 0, 0),
-                (this.lastFrame = e);
-              var t = 100 - (this.frame / this.fullFrameCount) * 100 + "%",
-                n = 100 - (e / this.fullFrameCount) * 100 + "%";
-              (this.playHeadTween = ra.to(this.playHead.current, {
-                duration: 0.05,
-                right: n,
-                ease: "none",
-              })),
-                (this.playHeadProgressTween = ra.to(
-                  this.playHeadProgress.current,
-                  {
-                    duration: 0.05,
-                    right: t,
-                    ease: "none",
-                  }
-                ));
-            } else this.initializeContext();
-        },
-      },
-      {
-        key: "render",
-        value: function () {
-          var e = {
-            height: this.props.height || "500vh",
-          };
-          return (0, l.jsxs)(l.Fragment, {
-            children: [
-              (0, l.jsxs)("div", {
-                ref: this.loadingWrap,
-                className: o["load-progress-wrap"],
-                children: [
-                  (0, l.jsxs)("div", {
-                    className: o["playhead-wrap"],
-                    children: [
-                      (0, l.jsx)("div", {
-                        ref: this.playHead,
-                        className: o.playhead,
-                      }),
-                      (0, l.jsx)("div", {
-                        ref: this.playHeadProgress,
-                        className: o["playhead-progress"],
-                      }),
-                    ],
-                  }),
-                  (0, l.jsx)("div", {
-                    ref: this.loadingProgress,
-                    className: o["load-progress"],
-                    style: {
-                      width: "0%",
-                    },
-                  }),
-                ],
-              }),
-              (0, l.jsxs)("div", {
-                ref: this.containerRef,
-                className: o.sequence,
-                style: e,
-                children: [
-                  (0, l.jsx)("div", {
-                    ref: this.viewerRef,
-                    className: o["canvas-viewer"],
-                    children: (0, l.jsx)("div", {
-                      style: {
-                        overflow: "hidden",
-                      },
-                      children: (0, l.jsx)("canvas", {
-                        ref: this.canvasRef,
-                        className: o["sequence-canvas"],
-                        width: this.width,
-                        height: this.height,
-                      }),
-                    }),
-                  }),
-                  this.props.children,
-                ],
-              }),
-            ],
-          });
-        },
-      },
-    ]),
-    a
-  );
-})(i.Component);

src/view/Section11.jsx

@@ -54,7 +54,7 @@ export default function Section11(props) {
       <TimeLineWallText
         className={"wall-text"}
         progressPosition={0}
-        duration={0.35}
+        duration={0.55}
         fade={0.1}
       >
         <div css={Style.DescriptionStyle}>