feat : 문구별 애니메이션 추가

sopt-makers · Jul 25, 2023 · 97cfbbd · 97cfbbd
1 parent d91f5ce
commit 97cfbbd
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 31 deletions.
diff --git a/apps/web/src/components/mainpage/greeting/GreetingSection.tsx b/apps/web/src/components/mainpage/greeting/GreetingSection.tsx
@@ -1,4 +1,3 @@
-import { m } from 'framer-motion';
 import React from 'react';
 
 import MakersLogo3D from '@/components/common/MakersLogo3D';
@@ -9,11 +8,11 @@ import Missions from './Missions';
 
 export default function Greeting() {
   return (
-    <div className='relative h-[600vh]'>
+    <div className='relative h-[960vh]'>
       <div className='absolute inset-0'>
-        <m.div className='sticky top-0 h-[100vh] pt-[8rem] flex justify-center items-center'>
+        <div className='sticky top-0 h-[100vh] pt-[8rem] flex justify-center items-center'>
           <MakersLogo3D className='h-[40rem] w-[40rem] opacity-50' />
-        </m.div>
+        </div>
       </div>
       <div className='absolute inset-0'>
         <Intro />

diff --git a/apps/web/src/components/mainpage/greeting/MakersIntodution.tsx b/apps/web/src/components/mainpage/greeting/MakersIntodution.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import clsx from 'clsx';
 import { m, useScroll, useTransform } from 'framer-motion';
 import { useRef } from 'react';
@@ -13,37 +11,49 @@ export default function MakersIntodution({ className }: GreetingProps) {
 
   const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end start'] });
 
-  const opacity = useTransform(scrollYProgress, [0, 0.12, 0.3, 0.52, 1], [0, 1, 1, 0, 0]);
+  const opacity1 = useTransform(scrollYProgress, [0, 0.1, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
+  const opacity2 = useTransform(scrollYProgress, [0.15, 0.25, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
+  const opacity3 = useTransform(scrollYProgress, [0.3, 0.4, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
+  const opacity4 = useTransform(scrollYProgress, [0.45, 0.5, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[200vh]', className)}>
-      <m.div
-        className='sticky top-0 pt-[19.2rem] flex flex-col justify-center items-center text-center'
-        style={{ opacity }}
-      >
-        <div className='flex flex-col justify-center items-center text-center'>
+    <article ref={containerRef} className={clsx('h-[420vh]', className)}>
+      <div className='sticky top-0 pt-[19.2rem] flex flex-col justify-center items-center text-center'>
+        <m.div className='flex flex-col justify-center items-center text-center' style={{ opacity: opacity1 }}>
           <p className='flex justify-center items-center gap-[1.6rem] text-32-regular'>
             <TextLogo />는
           </p>
-          <p className='mt-[6rem] text-40-semibold'>
+        </m.div>
+        <m.div
+          className='flex flex-col justify-center items-center text-center mt-[6rem]'
+          style={{ opacity: opacity2 }}
+        >
+          <p className='text-40-semibold'>
             SOPT에 필요한 프로덕트를 만들어
             <br /> <span className='text-main-makers'>3천여명의 구성원</span>들을{' '}
             <span className='text-sub-skyblue'>연결</span>하고 <span className='text-sub-yellow'>새로운 가치</span>를
             제공하기 위한
             <br /> SOPT 특수 기구예요.
           </p>
-          <p className='mt-[4rem] text-32-regular'>
+        </m.div>
+        <m.div
+          className='flex flex-col justify-center items-center text-center mt-[4rem]'
+          style={{ opacity: opacity3 }}
+        >
+          <p className='text-32-regular'>
             수년간 방치되어 SOPT를 잘 드러내지 못하는 공식 홈페이지를 보고
             <br />
             홈페이지에 오너십을 가진 조직의 부재라는 문제 의식으로부터
             <br />
             이를 지속 가능한 방법으로 해결하고자 22년 7월 30일 특수 기구로 시작했어요.
           </p>
-          <button className='flex flex-row justify-center items-center gap-[0.8rem] mt-[6rem] px-[3.2rem]  py-[2.4rem] text-24-semibold'>
+        </m.div>
+        <m.div className='mt-[6rem]' style={{ opacity: opacity4 }}>
+          <button className='flex flex-row justify-center items-center gap-[0.8rem] px-[3.2rem] py-[2.4rem] text-24-semibold'>
             makers 탄생 배경 보러가기 <ArrowIcon />
           </button>
-        </div>
-      </m.div>
+        </m.div>
+      </div>
     </article>
   );
 }

diff --git a/apps/web/src/components/mainpage/greeting/Missions.tsx b/apps/web/src/components/mainpage/greeting/Missions.tsx
@@ -13,31 +13,30 @@ export default function Missions({ className }: GreetingProps) {
 
   const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end start'] });
 
-  const opacity = useTransform(scrollYProgress, [0, 0.12, 0.3, 0.5, 1], [0, 1, 1, 0, 0]);
+  const opacity1 = useTransform(scrollYProgress, [0, 0.1, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
+  const opacity2 = useTransform(scrollYProgress, [0.14, 0.4, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
+  const opacity3 = useTransform(scrollYProgress, [0.44, 0.6, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[200vh]', className)}>
-      <m.div
-        className='sticky top-0 pt-[27.2rem] flex flex-col justify-center items-center gap-[1.6rem] text-60-semibold'
-        style={{ opacity }}
-      >
-        <p className='flex justify-center items-start gap-[1.792rem]'>
+    <article ref={containerRef} className={clsx('h-[340vh]', className)}>
+      <div className='sticky top-0 pt-[27.2rem] flex flex-col justify-center items-center gap-[1.6rem] text-60-semibold'>
+        <m.p className='flex justify-center items-start gap-[1.792rem]' style={{ opacity: opacity1 }}>
           <span className='text-sub-skyblue text-16-regular'>MISSION 1.</span>
           <span>
             3천명이 넘는 SOPT 구성원들의
             <br />
             연결되지 못한 가치를 발견하고,
           </span>
-        </p>
-        <p className='flex gap-[1.792rem]'>
+        </m.p>
+        <m.p className='flex gap-[1.792rem]' style={{ opacity: opacity2 }}>
           <span className='text-main-makers text-16-regular'>MISSION 2.</span>
           <span>SOPT 활동이 더 즐거울 수 있도록 도우며,</span>
-        </p>
-        <p className='flex gap-[1.792rem]'>
+        </m.p>
+        <m.p className='flex gap-[1.792rem]' style={{ opacity: opacity3 }}>
           <span className='text-sub-pink text-16-regular'>MISSION 3.</span>
           <span>SOPT를 대내외적으로 더 잘 알려요.</span>
-        </p>
-      </m.div>
+        </m.p>
+      </div>
     </article>
   );
 }