✨ icon animation added

yuancong-liu · Dec 27, 2023 · 0c5b1d2 · 0c5b1d2 · vercel · Dec 27, 2023
1 parent ab4a2c6
commit 0c5b1d2
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 935 deletions.
diff --git a/.markuplintrc b/.markuplintrc
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -52,7 +52,6 @@
     "gray-matter": "^4.0.3",
     "husky": "^8.0.1",
     "lint-staged": "^15.1.0",
-    "markuplint": "^3.12.0",
     "next-sitemap": "^4.2.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",

diff --git a/src/components/pages/home/IconsPc/index.module.scss b/src/components/pages/home/IconsPc/index.module.scss
@@ -14,21 +14,7 @@
   gap: 65px;
 }
 
-.c-mark {
-  animation: c-mark 3s ease-in-out infinite;
-  animation-play-state: paused;
-}
-
-.c-mark:hover {
-  animation-play-state: running;
-}
-
-@keyframes c-mark {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+.c-mark > path {
+  stroke: #fff;
+  stroke-width: 2px;
 }
diff --git a/src/components/pages/home/IconsPc/index.tsx b/src/components/pages/home/IconsPc/index.tsx
@@ -1,15 +1,122 @@
-import CMark from '~/assets/icons/c-mark.svg';
-import LYMark from '~/assets/icons/ly-mark.svg';
+import { motion } from 'framer-motion';
 
 import styles from './index.module.scss';
 
 export const IconsPc = () => {
+  const cMarkPath = {
+    hidden: {
+      pathLength: 0,
+      fill: 'rgba(255, 255, 255, 0)',
+    },
+    visible: {
+      pathLength: [0, 1, 1],
+      fill: [
+        'rgba(255, 255, 255, 0)',
+        'rgba(255, 255, 255, 0)',
+        'rgba(255, 255, 255, 1)',
+      ],
+      transition: {
+        duration: 3,
+        ease: 'easeInOut',
+      },
+    },
+  };
+
+  const cMark = {
+    hidden: {
+      rotate: 180,
+    },
+    visible: {
+      rotate: [180, 0, 0],
+      transition: {
+        duration: 3,
+        ease: 'easeInOut',
+      },
+    },
+  };
+
+  const lYMark = {
+    hidden: {
+      opacity: 0,
+    },
+    visible: {
+      opacity: [0, 0, 1],
+      transition: {
+        duration: 3,
+        ease: 'easeInOut',
+      },
+    },
+  }
+
   return (
     <div className={styles['overall-wrapper']}>
       <div className={styles['icons-wrapper']}>
-        <LYMark />
-        <LYMark />
-        <CMark className={styles['c-mark']} />
+        <motion.svg
+          variants={lYMark}
+          initial="hidden"
+          animate="visible"
+          width="358"
+          height="355"
+          viewBox="0 0 358 355"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M178.527 81.1323C125.062 81.1323 81.72 124.163 81.72 177.243C81.72 230.323 125.062 273.354 178.527 273.354C231.992 273.354 275.334 230.323 275.334 177.243C275.334 124.163 231.992 81.1323 178.527 81.1323ZM0 177.243C0 79.3544 79.9292 0 178.527 0C277.125 0 357.054 79.3544 357.054 177.243C357.054 275.132 277.125 354.486 178.527 354.486C79.9292 354.486 0 275.132 0 177.243Z"
+            fill="#fff"
+          />
+        </motion.svg>
+
+        <motion.svg
+          variants={lYMark}
+          initial="hidden"
+          animate="visible"
+          width="358"
+          height="355"
+          viewBox="0 0 358 355"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M178.527 81.1323C125.062 81.1323 81.72 124.163 81.72 177.243C81.72 230.323 125.062 273.354 178.527 273.354C231.992 273.354 275.334 230.323 275.334 177.243C275.334 124.163 231.992 81.1323 178.527 81.1323ZM0 177.243C0 79.3544 79.9292 0 178.527 0C277.125 0 357.054 79.3544 357.054 177.243C357.054 275.132 277.125 354.486 178.527 354.486C79.9292 354.486 0 275.132 0 177.243Z"
+            fill="#fff"
+          />
+        </motion.svg>
+
+        <motion.svg
+          variants={cMark}
+          initial="hidden"
+          animate="visible"
+          whileHover={{
+            rotate: 360,
+            transition: {
+              repeat: Infinity,
+              repeatType: 'loop',
+              duration: 3,
+              ease: 'easeInOut',
+            },
+          }}
+          className={styles['c-mark']}
+          width="373"
+          height="352"
+          viewBox="0 0 373 352"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            variants={cMarkPath}
+            initial="hidden"
+            animate="visible"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M114.933 203.448L0.859375 166.934L27.9364 83.5209L142.37 120.15V0.0281677H230.627V119.799L345.458 82.344L373 165.607L257.901 203.149L329.315 300.345L258.019 352L186.527 254.699L115.628 351.347L44.2917 299.746L114.933 203.448Z"
+            fill="#fff"
+          />
+        </motion.svg>
       </div>
     </div>
   );

diff --git a/src/components/pages/home/IconsSp/index.module.scss b/src/components/pages/home/IconsSp/index.module.scss
@@ -12,23 +12,13 @@
   display: flex;
   flex-flow: column nowrap;
   gap: 26px;
-}
-
-.c-mark {
-  animation: rotate 3s ease-in-out infinite;
-  animation-play-state: paused;
-}
 
-.c-mark:hover {
-  animation-play-state: running;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0);
+  > *:focus {
+    outline: none;
   }
+}
 
-  100% {
-    transform: rotate(360deg);
-  }
+.c-mark > path {
+  stroke: #fff;
+  stroke-width: 2px;
 }
diff --git a/src/components/pages/home/IconsSp/index.tsx b/src/components/pages/home/IconsSp/index.tsx
@@ -1,15 +1,117 @@
-import CMark from '~/assets/icons/c-mark-sp.svg';
-import LYMark from '~/assets/icons/ly-mark-sp.svg';
+import { motion } from 'framer-motion';
 
 import styles from './index.module.scss';
 
 export const IconsSp = () => {
+    const cMarkPath = {
+      hidden: {
+        pathLength: 0,
+        fill: 'rgba(255, 255, 255, 0)',
+      },
+      visible: {
+        pathLength: [0, 1, 1],
+        fill: [
+          'rgba(255, 255, 255, 0)',
+          'rgba(255, 255, 255, 0)',
+          'rgba(255, 255, 255, 1)',
+        ],
+        transition: {
+          duration: 3,
+          ease: 'easeInOut',
+        },
+      },
+    };
+
+    const cMark = {
+      hidden: {
+        rotate: 180,
+      },
+      visible: {
+        rotate: [180, 0, 0],
+        transition: {
+          duration: 3,
+          ease: 'easeInOut',
+        },
+      },
+    };
+
+    const lYMark = {
+      hidden: {
+        opacity: 0,
+      },
+      visible: {
+        opacity: [0, 0, 1],
+        transition: {
+          duration: 3,
+          ease: 'easeInOut',
+        },
+      },
+    };
+
   return (
     <div className={styles['overall-wrapper']}>
       <div className={styles['icons-wrapper']}>
-        <LYMark />
-        <LYMark />
-        <CMark className={styles['c-mark']} />
+        <motion.svg
+          variants={lYMark}
+          initial="hidden"
+          animate="visible"
+          width="195"
+          height="194"
+          viewBox="0 0 195 194"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M97.777 44.3692C68.7621 44.3692 45.2408 67.9014 45.2408 96.9297C45.2408 125.958 68.7621 149.49 97.777 149.49C126.792 149.49 150.313 125.958 150.313 96.9297C150.313 67.9014 126.792 44.3692 97.777 44.3692ZM0.89209 96.9297C0.89209 43.3969 44.2689 0 97.777 0C151.285 0 194.662 43.3969 194.662 96.9297C194.662 150.463 151.285 193.859 97.777 193.859C44.2689 193.859 0.89209 150.463 0.89209 96.9297Z"
+            fill="#fff"
+          />
+        </motion.svg>
+
+        <motion.svg
+          variants={lYMark}
+          initial="hidden"
+          animate="visible"
+          width="195"
+          height="194"
+          viewBox="0 0 195 194"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M97.777 44.3692C68.7621 44.3692 45.2408 67.9014 45.2408 96.9297C45.2408 125.958 68.7621 149.49 97.777 149.49C126.792 149.49 150.313 125.958 150.313 96.9297C150.313 67.9014 126.792 44.3692 97.777 44.3692ZM0.89209 96.9297C0.89209 43.3969 44.2689 0 97.777 0C151.285 0 194.662 43.3969 194.662 96.9297C194.662 150.463 151.285 193.859 97.777 193.859C44.2689 193.859 0.89209 150.463 0.89209 96.9297Z"
+            fill="#fff"
+          />
+        </motion.svg>
+
+        <motion.svg
+          variants={cMark}
+          initial="hidden"
+          animate="visible"
+          whileTap={{
+            scale: 0.9,
+            rotate: 45,
+          }}
+          className={styles['c-mark']}
+          width="201"
+          height="191"
+          viewBox="0 0 201 191"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            variants={cMarkPath}
+            initial="hidden"
+            animate="visible"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M61.6135 110.402L0 90.5905L14.6248 45.3339L76.4325 65.2074V0.0340576H124.102V65.0168L186.124 44.6954L201 89.8705L138.833 110.239L177.405 162.974L138.896 191L100.282 138.209L61.9887 190.646L23.4586 162.649L61.6135 110.402Z"
+            fill="#fff"
+          />
+        </motion.svg>
       </div>
     </div>
   );