Check icon and create to do icon animated

Muhammed-Rahif · Aug 16, 2021 · 7cb2c79 · 7cb2c79
1 parent 1a15c6b
commit 7cb2c79
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "todo-app",
-  "version": "0.1.0",
+  "version": "2.1.0",
   "homepage": "https://muhammed-rahif.github.io/ToDo-App",
   "private": true,
   "dependencies": {

diff --git a/src/App.js b/src/App.js
@@ -135,10 +135,10 @@ function App({ background = "" }) {
           easing: easeBackInOut.overshoot(2.5),
         }}
       >
-        {styles => (
+        {style => (
           <FAB
-            changeIcon={createToDoModel}
-            style={styles}
+            createToDoActive={createToDoModel}
+            style={style}
             onClick={() => setCreateToDoModel(!createToDoModel)}
           />
         )}

diff --git a/src/components/FAB/FAB.jsx b/src/components/FAB/FAB.jsx
@@ -1,11 +1,26 @@
 import React from "react";
 import "./FAB.css";
-import { animated } from "react-spring";
+import { animated, Spring } from "react-spring";
+import { easeBackInOut } from "d3-ease";
 
-function FAB({ onClick, style = {}, changeIcon = false }) {
+function FAB({ onClick, style = {}, createToDoActive = false }) {
   return (
     <animated.button style={style} className="button fab box is-primary" onClick={onClick}>
-      <i className={`fas fa-${changeIcon ? "chevron-down" : "plus"}`}></i>
+      <Spring
+        from={{ rotate: 0 }}
+        to={{ rotate: createToDoActive ? 180 : 0 }}
+        config={{
+          duration: 1500,
+          easing: easeBackInOut.overshoot(2.5),
+        }}
+      >
+        {style => (
+          <animated.i
+            style={style}
+            className={`fas fa-${createToDoActive ? "chevron-down" : "plus"}`}
+          ></animated.i>
+        )}
+      </Spring>
     </animated.button>
   );
 }

diff --git a/src/components/ToDoCard/ToDoCard.jsx b/src/components/ToDoCard/ToDoCard.jsx
@@ -121,11 +121,25 @@ function ToDoCard({
                       }}
                       key={indx}
                     >
-                      <i
-                        className={`fas fa-${
-                          indx === 0 ? "trash" : toDoFinished ? "undo" : "check"
-                        }`}
-                      ></i>
+                      {indx === 0 ? (
+                        <i className="fas fa-trash"></i>
+                      ) : (
+                        <Spring
+                          from={{ rotate: 0 }}
+                          to={{ rotate: toDoFinished ? 360 : 0 }}
+                          config={{
+                            duration: 1500,
+                            easing: easeBackInOut.overshoot(2.5),
+                          }}
+                        >
+                          {style => (
+                            <animated.i
+                              style={style}
+                              className={`fas fa-${toDoFinished ? "undo" : "check"}`}
+                            ></animated.i>
+                          )}
+                        </Spring>
+                      )}
                     </animated.button>
                   ))}
                 </animated.div>