style: add reverse scroll animation in hero

100-hours-a-week · Nov 19, 2024 · 0e05c9f · 0e05c9f
1 parent 4893999
commit 0e05c9f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 20 deletions.
diff --git a/src/app/(pages)/(landing)/_components/Intro.tsx b/src/app/(pages)/(landing)/_components/Intro.tsx
@@ -20,9 +20,11 @@ export default function Intro() {
       <motion.div
         initial="hidden"
         whileInView="visible"
-        viewport={{ root: scrollRef, once: true }}
+        viewport={{ root: scrollRef, once: false }}
         variants={{
+          hidden: { opacity: 0 },
           visible: {
+            opacity: 1,
             transition: {
               staggerChildren: 0.2 
             }
@@ -32,7 +34,8 @@ export default function Intro() {
         <motion.div
           variants={{
             hidden: { opacity: 0, y: 50 },
-            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+            exit: { opacity: 0, y: 50, transition: { duration: 0.5 } }
           }}
           className={styles.title}
         >
@@ -42,7 +45,8 @@ export default function Intro() {
         <motion.div
           variants={{
             hidden: { opacity: 0, y: 50 },
-            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+            exit: { opacity: 0, y: 50, transition: { duration: 0.5 } }
           }}
           className={styles.subTitle}
         >
@@ -53,7 +57,8 @@ export default function Intro() {
         <motion.div
           variants={{
             hidden: { opacity: 0, y: 50 },
-            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+            exit: { opacity: 0, y: 50, transition: { duration: 0.5 } }
           }}
           className={styles.tryBtnContainer}
         >
@@ -62,23 +67,26 @@ export default function Intro() {
           </Link>
         </motion.div>
       </motion.div>
-      <div className={styles.stepsContainer}>
         <motion.div
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true }}
+          viewport={{ once: false }}
           variants={{
+            hidden: { opacity: 0 },
             visible: {
+              opacity: 1,
               transition: {
                 staggerChildren: 0.2
               }
             }
           }}
+          className={styles.stepsContainer}
         >
           <motion.div
             variants={{
               hidden: { opacity: 0, y: 50 },
-              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+              exit: { opacity: 0, y: 50, transition: { duration: 0.5 } }
             }}
             className={styles.title}
           >
@@ -88,7 +96,8 @@ export default function Intro() {
           <motion.div
             variants={{
               hidden: { opacity: 0, y: 50 },
-              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+              exit: { opacity: 0, y: 50, transition: { duration: 0.5 } }
             }}
             className={`${styles.stepItem} stepItem`}
           >
@@ -107,7 +116,8 @@ export default function Intro() {
           <motion.div
             variants={{
               hidden: { opacity: 0, y: 50 },
-              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+              exit: { opacity: 0, y: 50, transition: { duration: 0.5 } }
             }}
             className={`${styles.stepItem} stepItem`}
           >
@@ -126,7 +136,8 @@ export default function Intro() {
           <motion.div
             variants={{
               hidden: { opacity: 0, y: 50 },
-              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+              visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+              exit: { opacity: 0, y: 50, transition: { duration: 0.5 } }
             }}
             className={`${styles.stepItem} stepItem`}
           >
@@ -143,6 +154,5 @@ export default function Intro() {
           </motion.div>
         </motion.div>
       </div>
-    </div>
   );
 }
diff --git a/src/app/(pages)/(landing)/_components/demo.module.css b/src/app/(pages)/(landing)/_components/demo.module.css
@@ -34,6 +34,12 @@
   border-radius: 10px;
 }
 
+.allBtnContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .allBtn {
   width: 140px;
   height: 36px;

diff --git a/src/app/(pages)/(landing)/_components/demo.tsx b/src/app/(pages)/(landing)/_components/demo.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 import styles from "./demo.module.css";
 import { Swiper, SwiperSlide } from "swiper/react";
 import type { Swiper as SwiperType } from "swiper";
 import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
 import Link from "next/link";
+import { motion } from "motion/react";
 
 import { Navigation } from "swiper/modules";
 import "swiper/css";
@@ -20,6 +21,7 @@ import exhibition from "../../../../../public/images/mock/exhibition.png";
 import wedding from "../../../../../public/images/mock/wedding.png";
 
 export default function Demo() {
+  const scrollRef = useRef(null);
   const [swiperIndex, setSwiperIndex] = useState(0);
   const [swiper, setSwiper] = useState<SwiperType>();
 
@@ -40,13 +42,50 @@ export default function Demo() {
   };
   return (
     <div className={styles.container}>
-      <div className={styles.subTitle}>
-        <span>4Q 활용</span>
-        <div className={styles.highliter}>예시</div>
-      </div>
-      <Link href="/4q-gallery" className={styles.allBtn}>
-        전체보기
-      </Link>
+      <motion.div 
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ root: scrollRef, once: false }}
+        variants={{
+          hidden: { opacity: 0 },
+          visible: {
+            opacity: 1,
+            transition: {
+              staggerChildren: 0.2 
+            }
+          }
+        }}
+        className={styles.subTitle}
+      >
+        <motion.span
+          variants={{
+            hidden: { opacity: 0, y: 20 },
+            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+          }}
+        >
+          4Q 활용
+        </motion.span>
+        <motion.div 
+          variants={{
+            hidden: { opacity: 0, y: 20 },
+            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+          }}
+          className={styles.highliter}
+        >
+          예시
+        </motion.div>
+      </motion.div>
+      <motion.div
+        variants={{
+          hidden: { opacity: 0, y: 20 },
+          visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+        }}
+        className={styles.allBtnContainer}
+      >
+        <Link href="/4q-gallery" className={styles.allBtn}>
+          전체보기
+        </Link>
+      </motion.div>
 
       <Swiper
         slidesPerView={1}

diff --git a/src/app/(pages)/(landing)/_components/intro.module.css b/src/app/(pages)/(landing)/_components/intro.module.css
@@ -40,7 +40,7 @@
 }
 
 .stepsContainer {
-  width: 100%;
+  width: 70%;
   margin-top: 140px;
   display: flex;
   flex-direction: column;