feat: add notifications animation (#510)

decentraland · Feb 23, 2024 · d8ab990 · d8ab990
1 parent 59ce589
commit d8ab990
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git a/src/components/Notifications/Notifications.css b/src/components/Notifications/Notifications.css
@@ -22,6 +22,11 @@
   position: relative;
 }
 
+.dcl.notifications-bell.notifications-active {
+  animation: shake 0.8s;
+  animation-iteration-count: 4;
+}
+
 .dcl.notifications-counter {
   width: 16px;
   height: 16px;
@@ -30,3 +35,39 @@
   left: 19px;
   cursor: pointer;
 }
+
+@keyframes shake {
+  0% {
+    transform: translate(1px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-2px, 0px) rotate(1deg);
+  }
+  30% {
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-2px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(2px, 1px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(1deg);
+  }
+  90% {
+    transform: translate(1px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
diff --git a/src/components/Notifications/Notifications.tsx b/src/components/Notifications/Notifications.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react'
+import classNames from 'classnames'
 
 import NotificationsFeed from './NotificationsFeed'
 import {
@@ -52,7 +53,12 @@ export default function Notifications({
   return (
     <div className="dcl notifications">
       <div>
-        <button className="dcl notifications-bell" onClick={onClick}>
+        <button
+          className={classNames('dcl notifications-bell', {
+            'notifications-active': newNotificationsCount > 0
+          })}
+          onClick={onClick}
+        >
           {!isOpen ? <NotificationBell /> : <NotificationBellActive />}
         </button>
         {!isOpen && newNotificationsCount > 0 && (