apply fade animation

packages/app/src/components/Fab.jsx

@@ -33,7 +33,7 @@ const Fab = () => {
   const stickyChangeHandler = useCallback((event) => {
     logger.debug('StickyEvents.CHANGE detected');
 
-    const newAnimateClasses = event.detail.isSticky ? 'animated fadeinup faster' : 'animated fadeout faster';
+    const newAnimateClasses = event.detail.isSticky ? 'animated fadeInUp faster' : 'animated fadeOut faster';
     const newButtonClasses = event.detail.isSticky ? '' : 'disabled grw-pointer-events-none';
 
     setAnimateClasses(newAnimateClasses);

packages/app/src/components/Fab.module.scss

@@ -1,16 +1,31 @@
-
 .grw-fab :global {
+  // workaround
+  // https://stackoverflow.com/a/57667536
   .fadeInUp {
-
+    & :local {
+      animation: fab-fadeinup 1s ease 0s;
+    }
   }
-
   .fadeOut {
+    & :local {
+      animation: fab-fadeout 0.5s ease 0s forwards;
+    }
+  }
+}
 
+@keyframes fab-fadeinup {
+  0% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
   }
 }
 
-// @keyframes fadeout {
-//   100% {
-//     opacity: 0;
-//   }
-// }
+@keyframes fab-fadeout {
+  100% {
+    opacity: 0
+  }
+}