Added interaction animation

storybookjs · May 24, 2024 · e74bcb7 · e74bcb7
1 parent 2200bb7
commit e74bcb7
Showing 1 changed file with 31 additions and 2 deletions.
diff --git a/apps/frontpage/components/home/manager/component-interaction.tsx b/apps/frontpage/components/home/manager/component-interaction.tsx
@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import { ComponentImage } from './component-image';
 
 export const ComponentInteractions = () => {
@@ -82,11 +83,39 @@ export const ComponentInteractions = () => {
         stroke="#979B9B"
         strokeWidth="0.2"
       />
-      <rect fill="white" height="36" rx="18" width="131" x="309" y="229" />
+      <motion.rect
+        animate={{ scale: [1, 0.9, 1] }}
+        fill="white"
+        height="36"
+        rx="18"
+        transition={{ delay: 1.3, duration: 0.2 }}
+        width="131"
+        x="309"
+        y="229"
+      />
+      {/* Icon Check */}
+      <motion.path
+        animate={{ opacity: 1 }}
+        d="M351.854 243.354C352.049 243.158 352.049 242.842 351.854 242.646C351.658 242.451 351.342 242.451 351.146 242.646L343 250.793L338.854 246.646C338.658 246.451 338.342 246.451 338.146 246.646C337.951 246.842 337.951 247.158 338.146 247.354L342.646 251.854C342.842 252.049 343.158 252.049 343.354 251.854L351.854 243.354Z"
+        fill="black"
+        initial={{ opacity: 0 }}
+        transition={{ delay: 1.4 }}
+      />
+      {/* Text: Added */}
+      <motion.path
+        animate={{ opacity: 1 }}
+        d="M362.176 252L367.2 240.72H368.576L373.616 252H371.92L370.736 249.248H365.024L363.856 252H362.176ZM367.872 242.56L365.616 247.904H370.176L367.904 242.56H367.872ZM377.815 252.144C377.132 252.144 376.53 251.984 376.007 251.664C375.495 251.333 375.095 250.864 374.807 250.256C374.519 249.648 374.375 248.928 374.375 248.096C374.375 247.264 374.519 246.549 374.807 245.952C375.095 245.344 375.495 244.875 376.007 244.544C376.519 244.213 377.122 244.048 377.815 244.048C378.402 244.048 378.924 244.176 379.383 244.432C379.842 244.688 380.183 245.035 380.407 245.472V240.72H382.023V252H380.439V250.64C380.215 251.109 379.868 251.477 379.399 251.744C378.94 252.011 378.412 252.144 377.815 252.144ZM378.231 250.896C378.892 250.896 379.426 250.656 379.831 250.176C380.236 249.696 380.439 249.003 380.439 248.096C380.439 247.189 380.236 246.501 379.831 246.032C379.426 245.552 378.892 245.312 378.231 245.312C377.559 245.312 377.02 245.552 376.615 246.032C376.21 246.501 376.007 247.189 376.007 248.096C376.007 249.003 376.21 249.696 376.615 250.176C377.02 250.656 377.559 250.896 378.231 250.896ZM387.268 252.144C386.586 252.144 385.983 251.984 385.46 251.664C384.948 251.333 384.548 250.864 384.26 250.256C383.972 249.648 383.828 248.928 383.828 248.096C383.828 247.264 383.972 246.549 384.26 245.952C384.548 245.344 384.948 244.875 385.46 244.544C385.972 244.213 386.575 244.048 387.268 244.048C387.855 244.048 388.378 244.176 388.836 244.432C389.295 244.688 389.636 245.035 389.86 245.472V240.72H391.476V252H389.892V250.64C389.668 251.109 389.322 251.477 388.852 251.744C388.394 252.011 387.866 252.144 387.268 252.144ZM387.684 250.896C388.346 250.896 388.879 250.656 389.284 250.176C389.69 249.696 389.892 249.003 389.892 248.096C389.892 247.189 389.69 246.501 389.284 246.032C388.879 245.552 388.346 245.312 387.684 245.312C387.012 245.312 386.474 245.552 386.068 246.032C385.663 246.501 385.46 247.189 385.46 248.096C385.46 249.003 385.663 249.696 386.068 250.176C386.474 250.656 387.012 250.896 387.684 250.896ZM397.409 252.144C396.129 252.144 395.121 251.787 394.385 251.072C393.649 250.347 393.281 249.36 393.281 248.112C393.281 247.312 393.441 246.608 393.761 246C394.092 245.381 394.545 244.901 395.121 244.56C395.697 244.219 396.359 244.048 397.105 244.048C398.183 244.048 399.031 244.395 399.649 245.088C400.268 245.771 400.577 246.715 400.577 247.92V248.464H394.849C394.967 250.085 395.825 250.896 397.425 250.896C397.873 250.896 398.311 250.827 398.737 250.688C399.175 250.549 399.585 250.32 399.969 250L400.449 251.12C400.097 251.44 399.644 251.691 399.089 251.872C398.535 252.053 397.975 252.144 397.409 252.144ZM397.169 245.184C396.497 245.184 395.964 245.392 395.569 245.808C395.175 246.224 394.935 246.779 394.849 247.472H399.217C399.185 246.747 398.993 246.187 398.641 245.792C398.289 245.387 397.799 245.184 397.169 245.184ZM405.315 252.144C404.632 252.144 404.03 251.984 403.507 251.664C402.995 251.333 402.595 250.864 402.307 250.256C402.019 249.648 401.875 248.928 401.875 248.096C401.875 247.264 402.019 246.549 402.307 245.952C402.595 245.344 402.995 244.875 403.507 244.544C404.019 244.213 404.622 244.048 405.315 244.048C405.902 244.048 406.424 244.176 406.883 244.432C407.342 244.688 407.683 245.035 407.907 245.472V240.72H409.523V252H407.939V250.64C407.715 251.109 407.368 251.477 406.899 251.744C406.44 252.011 405.912 252.144 405.315 252.144ZM405.731 250.896C406.392 250.896 406.926 250.656 407.331 250.176C407.736 249.696 407.939 249.003 407.939 248.096C407.939 247.189 407.736 246.501 407.331 246.032C406.926 245.552 406.392 245.312 405.731 245.312C405.059 245.312 404.52 245.552 404.115 246.032C403.71 246.501 403.507 247.189 403.507 248.096C403.507 249.003 403.71 249.696 404.115 250.176C404.52 250.656 405.059 250.896 405.731 250.896Z"
+        fill="#666D82"
+        initial={{ opacity: 0 }}
+        transition={{ delay: 1.4 }}
+      />
       {/* Add to cart text */}
-      <path
+      <motion.path
+        animate={{ opacity: 0 }}
         d="M333.176 252L338.2 240.72H339.576L344.616 252H342.92L341.736 249.248H336.024L334.856 252H333.176ZM338.872 242.56L336.616 247.904H341.176L338.904 242.56H338.872ZM348.815 252.144C348.132 252.144 347.53 251.984 347.007 251.664C346.495 251.333 346.095 250.864 345.807 250.256C345.519 249.648 345.375 248.928 345.375 248.096C345.375 247.264 345.519 246.549 345.807 245.952C346.095 245.344 346.495 244.875 347.007 244.544C347.519 244.213 348.122 244.048 348.815 244.048C349.402 244.048 349.924 244.176 350.383 244.432C350.842 244.688 351.183 245.035 351.407 245.472V240.72H353.023V252H351.439V250.64C351.215 251.109 350.868 251.477 350.399 251.744C349.94 252.011 349.412 252.144 348.815 252.144ZM349.231 250.896C349.892 250.896 350.426 250.656 350.831 250.176C351.236 249.696 351.439 249.003 351.439 248.096C351.439 247.189 351.236 246.501 350.831 246.032C350.426 245.552 349.892 245.312 349.231 245.312C348.559 245.312 348.02 245.552 347.615 246.032C347.21 246.501 347.007 247.189 347.007 248.096C347.007 249.003 347.21 249.696 347.615 250.176C348.02 250.656 348.559 250.896 349.231 250.896ZM358.268 252.144C357.586 252.144 356.983 251.984 356.46 251.664C355.948 251.333 355.548 250.864 355.26 250.256C354.972 249.648 354.828 248.928 354.828 248.096C354.828 247.264 354.972 246.549 355.26 245.952C355.548 245.344 355.948 244.875 356.46 244.544C356.972 244.213 357.575 244.048 358.268 244.048C358.855 244.048 359.378 244.176 359.836 244.432C360.295 244.688 360.636 245.035 360.86 245.472V240.72H362.476V252H360.892V250.64C360.668 251.109 360.322 251.477 359.852 251.744C359.394 252.011 358.866 252.144 358.268 252.144ZM358.684 250.896C359.346 250.896 359.879 250.656 360.284 250.176C360.69 249.696 360.892 249.003 360.892 248.096C360.892 247.189 360.69 246.501 360.284 246.032C359.879 245.552 359.346 245.312 358.684 245.312C358.012 245.312 357.474 245.552 357.068 246.032C356.663 246.501 356.46 247.189 356.46 248.096C356.46 249.003 356.663 249.696 357.068 250.176C357.474 250.656 358.012 250.896 358.684 250.896ZM372.277 252.144C371.295 252.144 370.565 251.893 370.085 251.392C369.605 250.891 369.365 250.165 369.365 249.216V245.44H367.845V244.192H369.365V241.84H370.981V244.192H373.397V245.44H370.981V249.088C370.981 249.653 371.098 250.08 371.333 250.368C371.578 250.656 371.973 250.8 372.516 250.8C372.687 250.8 372.853 250.784 373.013 250.752C373.173 250.709 373.333 250.661 373.493 250.608L373.749 251.824C373.589 251.92 373.365 251.995 373.077 252.048C372.799 252.112 372.533 252.144 372.277 252.144ZM378.106 252.144C377.317 252.144 376.634 251.979 376.058 251.648C375.482 251.317 375.034 250.853 374.714 250.256C374.405 249.648 374.25 248.928 374.25 248.096C374.25 247.264 374.405 246.549 374.714 245.952C375.034 245.344 375.482 244.875 376.058 244.544C376.634 244.213 377.317 244.048 378.106 244.048C378.874 244.048 379.546 244.213 380.122 244.544C380.698 244.875 381.146 245.344 381.466 245.952C381.786 246.549 381.946 247.264 381.946 248.096C381.946 248.928 381.786 249.648 381.466 250.256C381.146 250.853 380.698 251.317 380.122 251.648C379.546 251.979 378.874 252.144 378.106 252.144ZM378.106 250.896C378.767 250.896 379.301 250.656 379.706 250.176C380.111 249.696 380.314 249.003 380.314 248.096C380.314 247.189 380.111 246.501 379.706 246.032C379.301 245.552 378.767 245.312 378.106 245.312C377.434 245.312 376.895 245.552 376.49 246.032C376.085 246.501 375.882 247.189 375.882 248.096C375.882 249.003 376.085 249.696 376.49 250.176C376.895 250.656 377.434 250.896 378.106 250.896ZM391.404 252.144C390.604 252.144 389.911 251.979 389.324 251.648C388.748 251.307 388.3 250.832 387.98 250.224C387.66 249.605 387.5 248.88 387.5 248.048C387.5 246.811 387.852 245.835 388.556 245.12C389.26 244.405 390.209 244.048 391.404 244.048C391.895 244.048 392.38 244.133 392.86 244.304C393.34 244.475 393.735 244.709 394.044 245.008L393.532 246.144C393.233 245.867 392.903 245.664 392.54 245.536C392.188 245.397 391.852 245.328 391.532 245.328C390.775 245.328 390.188 245.568 389.772 246.048C389.367 246.517 389.164 247.189 389.164 248.064C389.164 248.939 389.367 249.627 389.772 250.128C390.188 250.619 390.775 250.864 391.532 250.864C391.852 250.864 392.188 250.8 392.54 250.672C392.903 250.533 393.233 250.325 393.532 250.048L394.044 251.2C393.735 251.488 393.335 251.717 392.844 251.888C392.364 252.059 391.884 252.144 391.404 252.144ZM397.866 252.144C397.322 252.144 396.837 252.037 396.41 251.824C395.984 251.611 395.642 251.323 395.386 250.96C395.141 250.597 395.018 250.187 395.018 249.728C395.018 249.152 395.162 248.699 395.45 248.368C395.749 248.037 396.234 247.797 396.906 247.648C397.589 247.499 398.506 247.424 399.658 247.424H400.202V247.008C400.202 246.4 400.074 245.963 399.818 245.696C399.562 245.429 399.141 245.296 398.554 245.296C398.106 245.296 397.658 245.365 397.21 245.504C396.762 245.632 396.304 245.84 395.834 246.128L395.338 244.992C395.744 244.704 396.25 244.475 396.858 244.304C397.466 244.133 398.048 244.048 398.602 244.048C399.669 244.048 400.458 244.304 400.97 244.816C401.482 245.317 401.738 246.107 401.738 247.184V252H400.218V250.704C400.026 251.152 399.728 251.504 399.322 251.76C398.917 252.016 398.432 252.144 397.866 252.144ZM398.186 250.992C398.762 250.992 399.242 250.789 399.626 250.384C400.01 249.979 400.202 249.467 400.202 248.848V248.416H399.674C398.896 248.416 398.282 248.453 397.834 248.528C397.397 248.603 397.082 248.731 396.89 248.912C396.709 249.083 396.618 249.323 396.618 249.632C396.618 250.037 396.757 250.368 397.034 250.624C397.312 250.869 397.696 250.992 398.186 250.992ZM403.964 252V244.192H405.532V245.584C405.937 244.656 406.78 244.139 408.06 244.032L408.588 244L408.7 245.376L407.724 245.472C406.305 245.611 405.596 246.341 405.596 247.664V252H403.964ZM413.698 252.144C412.717 252.144 411.986 251.893 411.506 251.392C411.026 250.891 410.786 250.165 410.786 249.216V245.44H409.266V244.192H410.786V241.84H412.402V244.192H414.818V245.44H412.402V249.088C412.402 249.653 412.52 250.08 412.754 250.368C413 250.656 413.394 250.8 413.938 250.8C414.109 250.8 414.274 250.784 414.434 250.752C414.594 250.709 414.754 250.661 414.914 250.608L415.17 251.824C415.01 251.92 414.786 251.995 414.498 252.048C414.221 252.112 413.954 252.144 413.698 252.144Z"
         fill="#666D82"
+        initial={{ opacity: 1 }}
+        transition={{ delay: 1.4 }}
       />
       <mask fill="white" id="path-17-inside-2_379_37063">
         <path d="M40 297H440V327H40V297Z" />