From 046241284703a525bfc34fa23889f444b77737f9 Mon Sep 17 00:00:00 2001
From: qt-coder <chuchenkhang@gmail.com>
Date: Tue, 29 Jun 2021 09:14:33 +0800
Subject: [PATCH] Added animation to cards

---
 pages/index.js | 37 +++++++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index b6fa385..292c515 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,9 +5,30 @@ import Hero from '../components/Hero/Hero'
 import { CTA } from '../components/CTA'
 import { Features } from '../components/Features/Features'
 import {Footer} from '../components/Footer/Footer'
+import {motion} from 'framer-motion'
 
 export default function Home() {
 
+  const container = {
+    hidden: { opacity: 1, scale: 0 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        delayChildren: 0.4,
+        staggerChildren: 0.3
+      }
+    }
+  }
+
+  const item = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1
+    }
+  }
+
   const [session, loading] = useSession()
 
   return (
@@ -22,14 +43,14 @@ export default function Home() {
       }
       {session && <>
         <Text fontSize='4xl'>Welcome {session.user.name}!</Text>
-        <div className='grid'>
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' />
-        </div>
+        <motion.div className='grid' variants={container} initial="hidden" animate="visible">
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
+        </motion.div>
       </>
       }
     </>