Contact 페이지 오브젝트 이미지 애니메이션 구현

package.json

@@ -41,7 +41,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "framer-motion": "^11.11.8",
+    "framer-motion": "^11.11.9",
     "husky": "^8.0.0",
     "postcss": "^8",
     "prettier": "^3.3.3",

src/app/(main)/contact/container/Contact1.tsx

@@ -1,26 +1,39 @@
-import React from 'react'
+'use client'
 
+import React from 'react'
+import { motion } from 'framer-motion'
+import useSequentialAnimation from '@/hooks/useSequencialAnimation'
+import useLoadingProgress from '@/hooks/useLoadingProgress'
+//
+//
+//
 export default function Contact1() {
+  const { isLoading, loadingProgress } = useLoadingProgress('contact')
+  const { chainAnimation, coneAnimation, plateAnimation, sphereAnimation } =
+    useSequentialAnimation(!isLoading && loadingProgress === 100)
+
   return (
     <section>
       <div className="relative w-full h-screen overflow-x-hidden overflow-y-hidden">
-        <img
+        <motion.img
+          animate={chainAnimation}
+          initial={{ opacity: 0 }}
           className={`absolute
             left-[42vw] w-[50vw] h-[50vw] top-[-16vw]
             mobile:left-[35vw] mobile:w-[53vw] mobile:h-[52vw] mobile:top-[-20.3vw]
             tablet:left-[12vw] tablet:w-[34vw] tablet:h-[34vw] tablet:top-[-10vw]
-            desktop:left-[12vw] desktop:w-[34vw] desktop:h-[34vw] desktop:top-[-10vw]  
-            `}
+            desktop:left-[12vw] desktop:w-[34vw] desktop:h-[34vw] desktop:top-[-10vw]`}
           src="/images/contact/obj1.png"
           alt="Object1-chain"
         />
-        <img
-          className={`absolute 
+        <motion.img
+          animate={coneAnimation}
+          initial={{ opacity: 0 }}
+          className={`absolute
             w-[60vw] h-[60vw] mt-40 pt-6 left-[58vw]
             mobile:w-[50vw] mobile:h-[50vw] mobile:mt-40 mobile:pt-6 mobile:left-[65vw]
             tablet:w-[45vw] tablet:h-[43vw] tablet:mt-0 tablet:pt-0 tablet:left-[66vw]
-            desktop:w-[45vw] desktop:h-[43vw] desktop:mt-0 desktop:pt-0 desktop:left-[66vw] 
-            `}
+            desktop:w-[45vw] desktop:h-[43vw] desktop:mt-0 desktop:pt-0 desktop:left-[66vw]`}
           src="/images/contact/obj2.png"
           alt="Object2-cone"
         />
@@ -31,7 +44,9 @@ export default function Contact1() {
         </div>
       </div>
       <div className="relative w-full h-[80vh] overflow-x-hidden overflow-y-hidden">
-        <img
+        <motion.img
+          animate={plateAnimation}
+          initial={{ opacity: 0 }}
           className={`absolute 
             left-[-25vw] w-[60vw] h-[60vw] 
             mobile:left-[-10vw] mobile:w-[35vw] mobile:h-[34vw] 
@@ -41,8 +56,10 @@ export default function Contact1() {
           src="/images/contact/obj3.png"
           alt="Object3-plate"
         />
-        <img
-          className={`absolute 
+        <motion.img
+          animate={sphereAnimation}
+          initial={{ opacity: 0 }}
+          className={`absolute animate-fadeinObject
             w-[77vw] h-[77vw] left-[45vw] top-[55vw]
           desktop:w-[31vw] desktop:h-[32vw] desktop:left-[58vw] desktop:top-[10vw]
           tablet:w-[31vw] tablet:h-[32vw] tablet:left-[58vw] tablet:top-[10vw]

src/hooks/useSequencialAnimation.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import { useAnimation } from 'framer-motion'
+
+const useSequentialAnimation = (isLoading: boolean) => {
+  const chainAnimation = useAnimation()
+  const coneAnimation = useAnimation()
+  const plateAnimation = useAnimation()
+  const sphereAnimation = useAnimation()
+
+  useEffect(() => {
+    if (!isLoading) {
+      chainAnimation.start({
+        opacity: [0, 1],
+        y: [-100, 0],
+        transition: { duration: 3 }
+      })
+
+      coneAnimation.start({
+        opacity: [0, 1],
+        y: [50, 0],
+        transition: { duration: 3, delay: 1 }
+      })
+
+      plateAnimation.start({
+        opacity: [0, 1],
+        y: [-50, 0],
+        transition: { duration: 3, delay: 2 }
+      })
+
+      sphereAnimation.start({
+        opacity: [0, 1],
+        y: [-50, 0],
+        transition: { duration: 3, delay: 3 }
+      })
+    }
+  }, [isLoading])
+
+  return { chainAnimation, coneAnimation, plateAnimation, sphereAnimation }
+}
+
+export default useSequentialAnimation

tailwind.config.ts

@@ -1,3 +1,4 @@
+import { HEADER, MOBILE_MENU_LIST } from '@/style/zIndex'
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
@@ -56,8 +57,16 @@ const config: Config = {
           '0%': {
             transform: 'scaleX(1)'
           },
+          '100%': { transform: 'scaleX(0.3)' }
+        },
+        fadeinObject: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(50px)'
+          },
           '100%': {
-            transform: 'scaleX(0.3)'
+            opacity: '1',
+            transform: 'translateY(0px)'
           }
         }
       },
@@ -67,11 +76,11 @@ const config: Config = {
         infiniteSlideOriginal:
           'infiniteSlideOriginal 5s linear infinite forwards',
         scaleLeft: 'scaleLeft 0.5s ease-in',
-        scaleDownCenter: 'scaleDownCenter 0.5s ease-in forwards'
+        scaleDownCenter: 'scaleDownCenter 0.5s ease-in forwards',
+        fadeinObject: 'fadeinObject 5s linear forwards'
       }
     }
   },
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   plugins: [require('tailwind-scrollbar-hide')]
 }
 

tsconfig.json

@@ -21,6 +21,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/custom.d.ts","next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "src/custom.d.ts",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }