feat: 스크롤 기반 애니메이션 구현

sopt-makers · Jul 24, 2023 · 0a77f2e · 0a77f2e
1 parent 09f7209
commit 0a77f2e
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 25 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -18,7 +18,7 @@
     "axios": "^1.4.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
-    "framer-motion": "^10.13.0",
+    "framer-motion": "10.12.23",
     "next": "^13.4.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,26 +1,31 @@
 'use client';
-import Header from '@/components/header/Header';
-import CoreValue from '@/components/mainpage/CoreValue';
+
+import MakersLogo3D from '@/components/common/MakersLogo3D';
 import Greeting from '@/components/mainpage/Greeting';
-import MakersIntodution from '@/components/mainpage/MakersIntodution';
-import Missions from '@/components/mainpage/Missions';
-import Product from '@/components/mainpage/Product';
-import Recruit from '@/components/mainpage/Recruit';
 
 export default function Page() {
   return (
     <div>
-      <Header />
-      <Greeting />
-      <div className='bg-makers-logo bg-center bg-no-repeat'>
+      {/* <Header /> */}
+      <div className='relative h-[300vh]'>
+        <div className='absolute inset-0'>
+          <div className='sticky top-0 h-[100vh] pt-[5rem] flex justify-center items-center'>
+            <MakersLogo3D className='h-[20rem] w-[20rem]' />
+          </div>
+        </div>
+        <div className='absolute inset-0'>
+          <Greeting className='' />
+        </div>
+      </div>
+      {/* <div className='bg-makers-logo bg-center bg-no-repeat'>
         <MakersIntodution />
       </div>
       <div className='bg-makers-logo bg-center bg-no-repeat'>
         <Missions />
       </div>
       <Product />
       <CoreValue />
-      <Recruit />
+      <Recruit /> */}
     </div>
   );
 }
diff --git a/apps/web/src/components/common/MakersLogo3D/index.tsx b/apps/web/src/components/common/MakersLogo3D/index.tsx
@@ -30,7 +30,7 @@ const MakersLogo3D: FC<MakersLogo3DProps> = ({ className }) => {
       const dx = clientX - elementX;
       const dy = clientY - elementY;
 
-      console.log(dx, dy);
+      // console.log(dx, dy);
 
       posX.set(dx);
       posY.set(dy);

diff --git a/apps/web/src/components/mainpage/Greeting.tsx b/apps/web/src/components/mainpage/Greeting.tsx
@@ -1,11 +1,20 @@
-export default function greeting() {
+import clsx from 'clsx';
+import { m, useScroll, useTransform } from 'framer-motion';
+import { useRef } from 'react';
+
+interface GreetingProps {
+  className?: string;
+}
+
+export default function Greeting({ className }: GreetingProps) {
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end start'] });
+
+  const opacity = useTransform(scrollYProgress, [0, 0.1, 0.5, 1], [1, 1, 0, 0]);
+
   return (
-    <article className='mb-[3.75rem] h-[100rem]'>
-      <div className='sticky top-0 flex flex-col justify-start items-center'>
-        <img
-          src='https://github.com/Brokyeom/modeling_final/assets/97586683/01d5d046-27fb-4812-9a3e-4f11cb9bbf08'
-          alt='dummy_logo'
-        />
+    <article ref={containerRef} className={clsx('h-screen', className)}>
+      <m.div className='flex flex-col justify-start items-center pt-[20rem]' style={{ opacity }}>
         <h1 className='mt-[3.75rem] text-center text-64-semibold'>
           SOPT에 없던 새로운 가치를 <br />
           제품을 통해 만들어갑니다.
@@ -15,7 +24,7 @@ export default function greeting() {
           <p className='text-16-regular mt-[0.75rem]'>72:21:03 뒤 지원 마감</p>
         </button>
         <ArrowIcon />
-      </div>
+      </m.div>
     </article>
   );
 }

diff --git a/yarn.lock b/yarn.lock
@@ -7106,9 +7106,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^10.13.0":
-  version: 10.13.0
-  resolution: "framer-motion@npm:10.13.0"
+"framer-motion@npm:10.12.23":
+  version: 10.12.23
+  resolution: "framer-motion@npm:10.12.23"
   dependencies:
     "@emotion/is-prop-valid": ^0.8.2
     tslib: ^2.4.0
@@ -7123,7 +7123,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: b84b78b6994bd77814a3fa0dfb4f266b74221369d9e82e350f8c8b2ec952d683597a373fe49609645631af020de42a6ec041bac60a022e396ff0be70c4233d87
+  checksum: 1cbc0a812ec53aaa6f9acb3c15ffa59258e79417a32c0b29d912023f5ed38254dafc1bb21b73936e14cc973036691ff4a8408a5af56d1dbcd7dd8165e956e018
   languageName: node
   linkType: hard
 
@@ -13791,7 +13791,7 @@ turbo@latest:
     clsx: ^2.0.0
     date-fns: ^2.30.0
     eslint-config-custom: "*"
-    framer-motion: ^10.13.0
+    framer-motion: 10.12.23
     next: ^13.4.8
     postcss: ^8.4.24
     react: ^18.2.0