commit 6c93496468709568f8e0b9c1da21214925703953
author Adrien Béraud <adrien.beraud@savoirfairelinux.com> Mon Jun 07 10:13:26 2021 -0400
committer Adrien Béraud <adrien.beraud@savoirfairelinux.com> Tue May 03 15:42:51 2022 -0400
tree 72f0680ade16c7640b1f3205aa7068ff6cbee8a7
parent 2ff41b25882723cd139d576f280b6f6c0b864da4

add animations

Change-Id: I55d77e10e680d9d72f7fefd4a3e4e2b193fad11d

client/src/pages/accountSelection.jsx

diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index c95b02b..6c52af4 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -8,6 +8,12 @@
 import ConversationAvatar from '../components/ConversationAvatar';
 import { AddRounded } from '@material-ui/icons';
 import { useHistory } from 'react-router';
+import { motion } from 'framer-motion';
+
+const variants = {
+  enter: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: "-50px" },
+}
 
 const AccountSelection = (props) => {
   const history = useHistory()
@@ -47,6 +53,7 @@
     <React.Fragment>
       <Header />
       <Container maxWidth="sm" style={{paddingBottom:32}}>
+        <motion.div drag="x" initial="exit" animate="enter" exit="exit" variants={variants}>
         <Card style={{marginTop:32, marginBottom:32}}>
           <CardHeader title="Choose an account" />
           <List>
@@ -61,6 +68,7 @@
               primary="Create new account" />
           </List>
         </Card>
+        </motion.div>
       </Container>
     </React.Fragment>
   )