Using framer-motion to improves UX

Author: juan-patrick

src/components/FileList/index.js

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 
 import { CircularProgressbar } from 'react-circular-progressbar';
 
-import { Container, FileInfo, Preview, List } from './styles';
+import { Container, FileInfo, Preview, List, ListItem } from './styles';
 
 import { ThemeContext } from 'styled-components';
 
@@ -12,22 +12,35 @@ import { UploadContext } from '../../providers/UploadProvider';
 function FileList() {
   const themeContext = useContext(ThemeContext);
   const { uploadedFiles, handleDelete } = useContext(UploadContext);
+  const [deleteFileAnimation, setDeleteFileAnimation] = useState('');
 
   return (
-    <Container>
+    <Container initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
       <h4>Imagens carregadas</h4>
       <List>
         {uploadedFiles.map((file) => (
-          <li key={file.id}>
+          <ListItem
+            key={file.id}
+            initial={{ opacity: 0, x: -100 }}
+            animate={
+              deleteFileAnimation === file.id
+                ? { opacity: 0, scale: 0 }
+                : { opacity: 1, x: 0 }
+            }
+          >
             <FileInfo>
               <Preview src={file.preview} alt="preview" />
-
               <div>
                 <strong>{file.name}</strong>
                 <span>
                   {file.readableSize}
                   {!!file.url && (
-                    <button onClick={(e) => handleDelete(file.id)}>
+                    <button
+                      onClick={(e) => {
+                        setDeleteFileAnimation(file.id);
+                        handleDelete(file.id);
+                      }}
+                    >
                       Excluir
                     </button>
                   )}
@@ -60,7 +73,7 @@ function FileList() {
             )}
             {file.uploaded && <MdCheckCircle size={34} color="#4caf50" />}
             {file.error && <MdError size={34} color="#f44336" />}
-          </li>
+          </ListItem>
         ))}
       </List>
     </Container>

src/components/FileList/styles.js

@@ -1,17 +1,7 @@
-import styled, { keyframes } from 'styled-components';
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
 
-const showAnimation = keyframes`  
-  0% {
-    opacity:0;
-    transform: scaleY(0) translateY(-100%);
-  }
-  100% {
-    opacity:1;
-    transform:  scaleY(1) translateY(0%);
-  }
-`;
-
-export const Container = styled.section`
+export const Container = styled(motion.section)`
   display: flex;
   flex-direction: column;
   min-height: 50px;
@@ -24,7 +14,7 @@ export const Container = styled.section`
   }
 `;
 
-export const List = styled.ul`
+export const List = styled(motion.ul)`
   display: flex;
   flex-direction: column;
 
@@ -35,17 +25,15 @@ export const List = styled.ul`
 
   max-height: 200px;
   overflow-x: auto;
+`;
 
-  & li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    animation: ${showAnimation} linear 0.3s;
-    animation-iteration-count: 1;
+export const ListItem = styled(motion.li)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
-    & + li {
-      margin-top: 10px;
-    }
+  & + li {
+    margin-top: 10px;
   }
 `;
 

src/components/Upload/styles.js

@@ -34,7 +34,7 @@ export const DropContainer = styled.div.attrs({ className: 'dropzone' })`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  height: 150px;
   width: 100%;
   padding: 15px 30px;