Animation update

package.json

@@ -16,8 +16,9 @@
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.15.4",
     "gsap": "^3.12.5",
+    "lenis": "^1.1.13",
     "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.2"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "devDependencies": {

src/components/IntroduceUS.astro

@@ -0,0 +1,51 @@
+---
+export interface IntroduceUS {}
+
+---
+<div class="w-full min-h-ssvh flex flex-col justify-top items-center justify-center">
+    <div>
+        Retrieve0与 Until SoftWare: Relink
+    </div>
+    <div class="w-full flex flex-col items-center text-left text-balance my-5 justify-center">
+        <div class="w-10/12 flex-row items-center hidden md:flex">
+            <div class="">
+                <div class="h-11 flex flex-row -mb-5">
+                    <div class="w-[10%]">
+                    </div>
+                    <div class="bg-slate-300 font-semibold text-black rounded-md content-center -rotate-12 text-3xl px-7" style="background: linear-gradient(153.58deg, #f7bdf8 32.25%, #2f3cc0 92.68%)">
+                        非常
+                    </div>
+                </div>
+                <div class="min-h-11 flex flex-row">
+                    <div style="width: 100px;">
+                    </div>
+                    <div class="bg-slate-300 dark:bg-[#ff8709] font-semibold text-black rounded-md px-8 py-4 content-center text-7xl" style="background: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);">
+                        Neboer
+                    </div>
+                </div>
+                <div class="h-11 flex flex-row -mt-2">
+                    <div class="w-[13%]">
+                    </div>
+                    <div class="bg-slate-300 font-semibold text-black rounded-md px-7 content-center text-3xl" style="background: linear-gradient(111.45deg, #ff8709 19.42%, #f7bdf8 73.08%)">
+                        感谢
+                    </div>
+                </div>
+            </div>
+            <img src="/Reblog/Neboer.png" class="rounded-full mx-5 w-44" />
+        </div>
+        <!-- <div class="w-10/12">
+            <div class="h-11">
+
+            </div>
+            <div class="h-11">
+
+            </div>
+            <div class="h-11">
+
+            </div>
+        </div> -->
+    </div>
+    <div class="w-10/12 flex text-center text-balance my-5 justify-center">
+        非常感谢Neboer以及 Until SoftWare: Relink 全体成员对我的帮助，对我的教导，收益颇丰，感激不尽！
+    </div>
+</div>

src/components/Seamlessloop.astro

@@ -0,0 +1,112 @@
+---
+export interface Seamlessloop {
+    box1: string;
+    box2?: string;
+    box3: string;
+    box4?: string;
+    box5: string;
+    box6?: string;
+    box7: string;
+    box8?: string;
+    box9: string;
+    box10?: string;
+    box11?: string;
+}
+const { box1, box2, box3,box4, box5, box6, box7, box8, box9, box10, box11 } = Astro.props as Seamlessloop;
+
+---
+<div class="wrapper">
+  <div class="box">{box1}</div>
+  <div class="box">{box2}</div>
+  <div class="box">{box3}</div>
+  <div class="box">{box4}</div>
+  <div class="box">{box5}</div>
+  <div class="box">{box6}</div>
+  <div class="box">{box7}</div>
+  <div class="box">{box8}</div>
+  <div class="box">{box9}</div>
+  <div class="box">{box10}</div>
+  <div class="box">{box11}</div>
+</div>
+
+<style>
+.wrapper {
+    @apply h-[8%] w-full relative flex items-center overflow-hidden m-2 ;
+}
+.box {
+    @apply flex items-center justify-center h-full w-5/12 md:w-3/12 rounded-lg dark:bg-zinc-900 dark:text-white bg-slate-100 m-2 relative shrink-0 text-lg ;
+}
+
+</style>
+
+<script>
+import gsap from "gsap";
+
+const boxes = gsap.utils.toArray(".box");
+
+gsap.set(boxes, {
+});
+
+const loop = horizontalLoop(boxes, { paused: false, reversed: false });
+
+function horizontalLoop(items, config) {
+  items = gsap.utils.toArray(items);
+  config = config || {};
+
+  let tl = gsap.timeline({
+    repeat: -1, 
+    paused: config.paused || false,
+    defaults: { ease: "none" },
+    onReverseComplete: () => {
+      tl.totalTime(tl.rawTime() + tl.duration() * 100);
+      }
+    }),
+    length = items.length,
+    startX = items[0].offsetLeft,
+    times: number[] = [],
+    widths: number[] = [],
+    xPercents: number[] = [],
+    pixelsPerSecond = (config.speed || 0.5) * 100,
+    snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1),
+    totalWidth, curX, distanceToStart, distanceToLoop, item, i;
+
+  gsap.set(items, {
+    xPercent: (i, el) => {
+        let w = widths[i] = parseFloat(gsap.getProperty(el, "width", "px") as string);
+        const x = parseFloat(gsap.getProperty(el, "x", "px") as string);
+      const xPercent = gsap.getProperty(el, "xPercent");
+
+      xPercents[i] = snap((x / w * 100) + (xPercent as number));
+
+      return xPercents[i];
+    }
+  });
+
+  gsap.set(items, { x: 0 });
+  totalWidth = items[length - 1].offsetLeft + xPercents[length - 1] / 100 * widths[length - 1] - startX + 
+  items[length - 1].offsetWidth * (gsap.getProperty(items[length - 1], "scaleX") as number) + 
+  (config.paddingRight || 0) + 16;
+
+  for (i = 0; i < length; i++) {
+    item = items[i];
+    curX = xPercents[i] / 100 * widths[i];
+    distanceToStart = item.offsetLeft + curX - startX;
+    distanceToLoop = distanceToStart + widths[i] * (gsap.getProperty(item, "scaleX") as number);
+
+    tl.to(item, { xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond }, 0)
+      .fromTo(item, { xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false }, distanceToLoop / pixelsPerSecond)
+      .add("label" + i, distanceToStart / pixelsPerSecond);
+    times[i] = distanceToStart / pixelsPerSecond;
+  }
+
+  tl.times = times;
+  tl.progress(1, true).progress(0, true);
+
+  if (config.reversed) {
+    tl.reverse(0);
+  }
+
+  return tl;
+}
+
+</script>

src/components/Seamlessloop.js

@@ -0,0 +1,68 @@
+import gsap from "gsap";
+
+const Rboxes = gsap.utils.toArray(".Rbox");
+
+gsap.set(Rboxes, {
+});
+
+const loop = horizontalLoop(Rboxes, { paused: false, reversed: true });
+
+function horizontalLoop(items, config) {
+  items = gsap.utils.toArray(items);
+  config = config || {};
+
+  let tl = gsap.timeline({
+      repeat: config.repeat, 
+      paused: config.paused || false,
+      defaults: { ease: "none" },
+      onReverseComplete: () => {
+        tl.totalTime(tl.rawTime() + tl.duration() * 100);
+      }
+    }),
+    length = items.length,
+    startX = items[0].offsetLeft,
+    times: number[] = [],
+    widths: number[] = [],
+    xPercents: number[] = [],
+    pixelsPerSecond = (config.speed || 1) * 100,
+    snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1),
+    totalWidth, curX, distanceToStart, distanceToLoop, item, i;
+
+  gsap.set(items, {
+    xPercent: (i, el) => {
+        let w = widths[i] = parseFloat(gsap.getProperty(el, "width", "px") as string);
+        const x = parseFloat(gsap.getProperty(el, "x", "px") as string);
+      const xPercent = gsap.getProperty(el, "xPercent");
+
+      xPercents[i] = snap((x / w * 100) + (xPercent as number));
+
+      return xPercents[i];
+    }
+  });
+
+  gsap.set(items, { x: 0 });
+  totalWidth = items[length - 1].offsetLeft + xPercents[length - 1] / 100 * widths[length - 1] - startX + 
+  items[length - 1].offsetWidth * (gsap.getProperty(items[length - 1], "scaleX") as number) + 
+  (config.paddingRight || 0);
+
+  for (i = 0; i < length; i++) {
+    item = items[i];
+    curX = xPercents[i] / 100 * widths[i];
+    distanceToStart = item.offsetLeft + curX - startX;
+    distanceToLoop = distanceToStart + widths[i] * (gsap.getProperty(item, "scaleX") as number);
+
+    tl.to(item, { xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond }, 0)
+      .fromTo(item, { xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false }, distanceToLoop / pixelsPerSecond)
+      .add("label" + i, distanceToStart / pixelsPerSecond);
+    times[i] = distanceToStart / pixelsPerSecond;
+  }
+
+  tl.times = times;
+  tl.progress(1, true).progress(0, true);
+
+  if (config.reversed) {
+    tl.reverse(0);
+  }
+
+  return tl;
+}

src/components/Seamlessloop_R.astro

@@ -0,0 +1,112 @@
+---
+export interface Seamlessloop_R {
+    Rbox1: string;
+    Rbox2?: string;
+    Rbox3: string;
+    Rbox4?: string;
+    Rbox5: string;
+    Rbox6?: string;
+    Rbox7: string;
+    Rbox8?: string;
+    Rbox9: string;
+    Rbox10?: string;
+    Rbox11?: string;
+}
+const { Rbox1, Rbox2, Rbox3,Rbox4, Rbox5, Rbox6, Rbox7, Rbox8, Rbox9, Rbox10, Rbox11 } = Astro.props as Seamlessloop_R;
+
+---
+<div class="Rwrapper">
+  <div class="Rbox">{Rbox1}</div>
+  <div class="Rbox">{Rbox2}</div>
+  <div class="Rbox">{Rbox3}</div>
+  <div class="Rbox">{Rbox4}</div>
+  <div class="Rbox">{Rbox5}</div>
+  <div class="Rbox">{Rbox6}</div>
+  <div class="Rbox">{Rbox7}</div>
+  <div class="Rbox">{Rbox8}</div>
+  <div class="Rbox">{Rbox9}</div>
+  <div class="Rbox">{Rbox10}</div>
+  <div class="Rbox">{Rbox11}</div>
+</div>
+
+<style>
+.Rwrapper {
+    @apply h-[8%] w-full relative flex items-center overflow-hidden m-2 ;
+}
+.Rbox {
+    @apply flex items-center justify-center h-full w-5/12 md:w-3/12 rounded-lg dark:bg-zinc-900 bg-slate-100 dark:text-white m-2 relative shrink-0 text-lg ;
+}
+
+</style>
+
+<script>
+import gsap from "gsap";
+
+const Rboxes = gsap.utils.toArray(".Rbox");
+
+gsap.set(Rboxes, {
+});
+
+const loop = horizontalLoop(Rboxes, { paused: false, reversed: true });
+
+function horizontalLoop(items, config) {
+  items = gsap.utils.toArray(items);
+  config = config || {};
+
+  let tl = gsap.timeline({
+    repeat: -1, 
+    paused: config.paused || false,
+    defaults: { ease: "none" },
+    onReverseComplete: () => {
+      tl.totalTime(tl.rawTime() + tl.duration() * 100);
+    }
+    }),
+    length = items.length,
+    startX = items[0].offsetLeft,
+    times: number[] = [],
+    widths: number[] = [],
+    xPercents: number[] = [],
+    pixelsPerSecond = (config.speed || 0.5) * 100,
+    snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1),
+    totalWidth, curX, distanceToStart, distanceToLoop, item, i;
+
+  gsap.set(items, {
+    xPercent: (i, el) => {
+        let w = widths[i] = parseFloat(gsap.getProperty(el, "width", "px") as string);
+        const x = parseFloat(gsap.getProperty(el, "x", "px") as string);
+      const xPercent = gsap.getProperty(el, "xPercent");
+
+      xPercents[i] = snap((x / w * 100) + (xPercent as number));
+
+      return xPercents[i];
+    }
+  });
+
+  gsap.set(items, { x: 0 });
+  totalWidth = items[length - 1].offsetLeft + xPercents[length - 1] / 100 * widths[length - 1] - startX + 
+  items[length - 1].offsetWidth * (gsap.getProperty(items[length - 1], "scaleX") as number) + 
+  (config.paddingRight || 0) + 16;
+
+  for (i = 0; i < length; i++) {
+    item = items[i];
+    curX = xPercents[i] / 100 * widths[i];
+    distanceToStart = item.offsetLeft + curX - startX;
+    distanceToLoop = distanceToStart + widths[i] * (gsap.getProperty(item, "scaleX") as number);
+
+    tl.to(item, { xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond }, 0)
+      .fromTo(item, { xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false }, distanceToLoop / pixelsPerSecond)
+      .add("label" + i, distanceToStart / pixelsPerSecond);
+    times[i] = distanceToStart / pixelsPerSecond;
+  }
+
+  tl.times = times;
+  tl.progress(1, true).progress(0, true);
+
+  if (config.reversed) {
+    tl.reverse(0);
+  }
+
+  return tl;
+}
+
+</script>

src/env.d.ts

@@ -1 +1 @@
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />

src/layouts/Layout.astro

@@ -55,13 +55,25 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 			Courier New,
 			monospace;
 	}
-	.h-ssvh{
-		height: calc(100svh - 3rem);
-	}
 	.box {
         width: 100px;
         height: 100px;
         background: red;
       }
 
 </style>
+<script>
+import Lenis from 'lenis'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+const lenis = new Lenis()
+
+lenis.on('scroll', ScrollTrigger.update)
+
+gsap.ticker.add((time) => {
+  lenis.raf(time * 1000)
+})
+
+gsap.ticker.lagSmoothing(0)
+</script>