feat: use ReactLenis and simplify motion animations in Home page
This commit is contained in:
me
@@ -1,11 +1,5 @@
|
||||
import { lazy, Suspense, useEffect, useRef } from "react";
|
||||
import {
|
||||
BrowserRouter,
|
||||
Navigate,
|
||||
Route,
|
||||
Routes,
|
||||
ScrollRestoration,
|
||||
} from "react-router-dom";
|
||||
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||
import { ProtectedRoute, PublicRoute } from "./components/RouteGuards";
|
||||
import SplashScreen from "./components/SplashScreen";
|
||||
import { ROUTES } from "./config/routes";
|
||||
|
||||
+45
-44
@@ -1,9 +1,9 @@
|
||||
import { InfoIcon } from "@phosphor-icons/react";
|
||||
import { ReactLenis } from "lenis/react";
|
||||
import {
|
||||
motion,
|
||||
useMotionValueEvent,
|
||||
useScroll,
|
||||
useSpring,
|
||||
useTransform,
|
||||
} from "motion/react";
|
||||
import { useRef, useState } from "react";
|
||||
@@ -16,14 +16,9 @@ import { formatDate } from "../utils/dateFormat.ts";
|
||||
|
||||
export default function Home() {
|
||||
const sectionContainer1 = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress: section1ScrollProgress } = useScroll({
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: sectionContainer1,
|
||||
});
|
||||
const smoothProgress1 = useSpring(section1ScrollProgress, {
|
||||
stiffness: 100,
|
||||
damping: 30,
|
||||
restDelta: 0.001,
|
||||
});
|
||||
const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true);
|
||||
const [flapOpen, setFlapOpen] = useState(false);
|
||||
const [recipient, setRecipient] = useState("someone dear");
|
||||
@@ -31,7 +26,7 @@ export default function Home() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useMotionValueEvent(section1ScrollProgress, "change", (latestScrollValue) => {
|
||||
useMotionValueEvent(scrollYProgress, "change", (latestScrollValue) => {
|
||||
if (latestScrollValue > 0.54) {
|
||||
setFlapOpen(false);
|
||||
} else {
|
||||
@@ -55,6 +50,7 @@ export default function Home() {
|
||||
});
|
||||
|
||||
return (
|
||||
<ReactLenis root options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>
|
||||
<section
|
||||
ref={sectionContainer1}
|
||||
className="relative w-full h-[850vh] bg-base-100 font-serif"
|
||||
@@ -64,8 +60,8 @@ export default function Home() {
|
||||
<motion.div
|
||||
className="absolute flex flex-col items-center justify-center pointer-events-none"
|
||||
style={{
|
||||
opacity: useTransform(smoothProgress1, [0, 0.12, 1], [1, 0, 0]),
|
||||
scale: useTransform(smoothProgress1, [0, 0.12], [1, 10]),
|
||||
opacity: useTransform(scrollYProgress, [0, 0.12, 1], [1, 0, 0]),
|
||||
scale: useTransform(scrollYProgress, [0, 0.12], [1, 10]),
|
||||
}}
|
||||
>
|
||||
<h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6">
|
||||
@@ -79,9 +75,9 @@ export default function Home() {
|
||||
<motion.div
|
||||
className="absolute text-center"
|
||||
style={{
|
||||
opacity: useTransform(smoothProgress1, [0, 0.15, 0.2], [0, 1, 0]),
|
||||
y: useTransform(smoothProgress1, [0, 0.15, 0.2], [40, 0, -40]),
|
||||
scale: useTransform(smoothProgress1, [0, 0.15, 0.2], [0.8, 1, 3]),
|
||||
opacity: useTransform(scrollYProgress, [0, 0.15, 0.2], [0, 1, 0]),
|
||||
y: useTransform(scrollYProgress, [0, 0.15, 0.2], [40, 0, -40]),
|
||||
scale: useTransform(scrollYProgress, [0, 0.15, 0.2], [0.8, 1, 3]),
|
||||
}}
|
||||
>
|
||||
<div className="mt-6 text-4xl md:text-6xl text-base-content/60 italic">
|
||||
@@ -93,11 +89,11 @@ export default function Home() {
|
||||
className="absolute text-center px-6"
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.18, 0.25, 0.3],
|
||||
[0, 1, 0],
|
||||
),
|
||||
y: useTransform(smoothProgress1, [0.18, 0.25, 0.3], [20, 0, -20]),
|
||||
y: useTransform(scrollYProgress, [0.18, 0.25, 0.3], [20, 0, -20]),
|
||||
}}
|
||||
transition={{ delay: 4 }}
|
||||
>
|
||||
@@ -106,12 +102,12 @@ export default function Home() {
|
||||
className="mt-6 text-4xl md:text-6xl text-base-content/60 "
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.22, 0.25, 0.35, 0.4],
|
||||
[0, 1, 1, 0],
|
||||
),
|
||||
y: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.25, 0.3, 0.35, 0.4],
|
||||
[20, 0, 0, -20],
|
||||
),
|
||||
@@ -137,12 +133,12 @@ export default function Home() {
|
||||
<motion.h2
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.3, 0.35, 0.4, 0.45],
|
||||
[0, 1, 1, 0],
|
||||
),
|
||||
y: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.3, 0.35, 0.4, 0.45],
|
||||
[40, 0, 0, -40],
|
||||
),
|
||||
@@ -159,12 +155,12 @@ export default function Home() {
|
||||
<motion.h2
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.45, 0.5, 0.55, 0.6],
|
||||
[0, 1, 1, 0],
|
||||
),
|
||||
y: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.45, 0.5, 0.55, 0.6],
|
||||
[40, 0, 0, -40],
|
||||
),
|
||||
@@ -185,12 +181,12 @@ export default function Home() {
|
||||
<motion.h2
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.6, 0.63, 0.72, 0.75],
|
||||
[0, 1, 1, 0],
|
||||
),
|
||||
y: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.6, 0.63, 0.72, 0.75],
|
||||
[40, 0, 0, -40],
|
||||
),
|
||||
@@ -202,7 +198,7 @@ export default function Home() {
|
||||
className="font-display text-accent"
|
||||
style={{
|
||||
color: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.67, 1],
|
||||
["var(--color-accent)", "var(--color-neutral)"],
|
||||
),
|
||||
@@ -212,14 +208,14 @@ export default function Home() {
|
||||
</motion.span>
|
||||
<motion.span
|
||||
style={{
|
||||
opacity: useTransform(smoothProgress1, [0.66, 0.7], [0, 1]),
|
||||
opacity: useTransform(scrollYProgress, [0.66, 0.7], [0, 1]),
|
||||
}}
|
||||
>
|
||||
<motion.span
|
||||
className="font-display text-accent"
|
||||
style={{
|
||||
color: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.67, 1],
|
||||
["var(--color-accent)", "var(--color-neutral)"],
|
||||
),
|
||||
@@ -238,20 +234,20 @@ export default function Home() {
|
||||
<motion.h2
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.75, 0.8, 0.85, 0.9],
|
||||
[0, 1, 1, 0],
|
||||
),
|
||||
y: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.75, 0.8, 0.85, 0.9],
|
||||
[40, 0, 0, -40],
|
||||
),
|
||||
}}
|
||||
className="absolute text-4xl md:text-6xl text-center px-10 leading-tight"
|
||||
>
|
||||
and even <span className="font-display text-error">burn it</span> to
|
||||
release the burden.
|
||||
and even <span className="font-display text-error">burn it</span>{" "}
|
||||
to release the burden.
|
||||
</motion.h2>
|
||||
{/* Outro */}
|
||||
<motion.h2
|
||||
@@ -259,8 +255,8 @@ export default function Home() {
|
||||
"italic absolute text-4xl md:text-6xl text-center px-10 leading-tight"
|
||||
}
|
||||
style={{
|
||||
opacity: useTransform(smoothProgress1, [0.9, 1], [0, 1]),
|
||||
y: useTransform(smoothProgress1, [0.9, 1], [80, 0]),
|
||||
opacity: useTransform(scrollYProgress, [0.9, 1], [0, 1]),
|
||||
y: useTransform(scrollYProgress, [0.9, 1], [80, 0]),
|
||||
}}
|
||||
>
|
||||
You've been carrying it long enough.
|
||||
@@ -271,10 +267,10 @@ export default function Home() {
|
||||
"z-100 absolute -bottom-12 md:bottom-0 font-display flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center"
|
||||
}
|
||||
style={{
|
||||
opacity: useTransform(smoothProgress1, [0.98, 1], [0, 1]),
|
||||
y: useTransform(smoothProgress1, [0.98, 1], [80, 0]),
|
||||
opacity: useTransform(scrollYProgress, [0.98, 1], [0, 1]),
|
||||
y: useTransform(scrollYProgress, [0.98, 1], [80, 0]),
|
||||
display: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.96, 1],
|
||||
["none", "flex"],
|
||||
),
|
||||
@@ -307,13 +303,17 @@ export default function Home() {
|
||||
className={"z-21 absolute"}
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.3, 0.4, 0.5, 0.52],
|
||||
[0, 1, 0.1, 0],
|
||||
),
|
||||
y: useTransform(smoothProgress1, [0.3, 0.45, 0.5], [300, 0, 200]),
|
||||
y: useTransform(
|
||||
scrollYProgress,
|
||||
[0.3, 0.45, 0.5],
|
||||
[300, 0, 200],
|
||||
),
|
||||
scale: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.3, 0.4, 0.5],
|
||||
[1, 1, 0.6],
|
||||
),
|
||||
@@ -331,11 +331,11 @@ export default function Home() {
|
||||
className="absolute scale-50 md:scale-80 z-10"
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.4, 0.45, 0.5, 0.7, 0.9, 1],
|
||||
[0, 0.6, 1, 1, 0.3, 0],
|
||||
),
|
||||
y: useTransform(smoothProgress1, [0.45, 0.5, 1], [600, 200, 0]),
|
||||
y: useTransform(scrollYProgress, [0.45, 0.5, 1], [600, 200, 0]),
|
||||
}}
|
||||
>
|
||||
<EnvelopeReveal
|
||||
@@ -353,11 +353,11 @@ export default function Home() {
|
||||
className="fixed bottom-0 z-10 font-sans -mb-6 scale-85 md:scale-100 md:mb-0"
|
||||
style={{
|
||||
opacity: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.98, 0.995, 1],
|
||||
[0, 0.5, 1],
|
||||
),
|
||||
y: useTransform(smoothProgress1, [0.98, 1], [50, -10]),
|
||||
y: useTransform(scrollYProgress, [0.98, 1], [50, -10]),
|
||||
}}
|
||||
>
|
||||
<Saajan
|
||||
@@ -375,7 +375,7 @@ export default function Home() {
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: useTransform(
|
||||
smoothProgress1,
|
||||
scrollYProgress,
|
||||
[0.45, 0.5, 0.7, 0.75, 1],
|
||||
[
|
||||
"var(--color-primary)",
|
||||
@@ -385,12 +385,13 @@ export default function Home() {
|
||||
"var(--color-error)",
|
||||
],
|
||||
),
|
||||
scale: useTransform(smoothProgress1, [0, 1], [0.6, 2.5]),
|
||||
scale: useTransform(scrollYProgress, [0, 1], [0.6, 2.5]),
|
||||
}}
|
||||
/>
|
||||
<div className="absolute border border-primary/5 w-64 h-64 rounded-full backdrop-blur-[1px]" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</ReactLenis>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user