From 11baadf180c0cf2ccf043a3598ecc4f1193c173d Mon Sep 17 00:00:00 2001
From: Sohana Shabnam <98682322+SohanaShabnam05@users.noreply.github.com>
Date: Sun, 9 Oct 2022 17:59:46 +0530
Subject: [PATCH] cardanimation

---
 src/App.css  | 35 +++++++++++++++++++++++++++++++++++
 src/App.js   | 45 +++++++++++++++++++++++++++++++++++++++++++++
 src/index.js | 12 ++++++++++++
 3 files changed, 92 insertions(+)
 create mode 100644 src/App.css
 create mode 100644 src/App.js
 create mode 100644 src/index.js

diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..ffdf9f8
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,35 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+body {
+  background: linear-gradient(to right, #2c5364, #203a43);
+}
+
+.App {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card {
+  background: white;
+  padding: 3rem 5rem;
+  border-radius: 2rem;
+}
+
+.card p{
+  padding-top: 1rem;
+  line-height: 150%;
+}
+
+.expand {
+  width: 40rem;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..fd854ea
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,45 @@
+import {motion, AnimatePresence} from 'framer-motion';
+import { useState } from 'react';
+import './App.css';
+
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+   <div className="App">
+    <motion.div 
+    transition={{layout: { duration: 1, type:"spring"}}}
+    onClick={() => setIsOpen(!isOpen)} 
+    style={{borderRadius: "1rem", boxShadow: '0px 10px 30px rgba(0,0,0)'}}  
+    className="card">
+    <motion.h2 layout="position">Card Animation 🚀</motion.h2>
+    <AnimatePresence>
+    {isOpen && (
+    <motion.div 
+    initial={{opacity: 0}} 
+    animate={{opacity: 1}} 
+    transition={{duration: 1}}
+    exit={{ opacity: 0}}
+    className="expand"
+    layout
+    > 
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi maxime asperiores culpa, omnis vel, repellat atque doloribus, quis in est facilis magni. Ut suscipit culpa corrupti similique possimus nulla sit.
+      </p>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, quam.
+      </p>
+    </motion.div>
+   
+   
+    )}
+    </AnimatePresence>
+    </motion.div>
+    
+   </div>
+  );
+}
+
+
+
+export default App;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..d37315d
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+