like animation

src/components/node/NodeImageSlideBlock/styles.scss

@@ -16,6 +16,7 @@
   position: relative;
   overflow: hidden;
   user-select: none;
+  will-change: transform, height;
 
   .image {
     max-height: 960px;

src/components/node/NodePanelInner/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
@@ -17,7 +17,7 @@ interface IProps {
 }
 
 const NodePanelInner: FC<IProps> = ({
-  node: { title, user },
+  node: { title, user, is_liked },
   stack,
   can_edit,
   can_like,
@@ -41,8 +41,12 @@ const NodePanelInner: FC<IProps> = ({
             </div>
           )}
           {can_like && (
-            <div>
-              <Icon icon="heart" size={24} onClick={onLike} />
+            <div className={classNames(styles.like, { is_liked })}>
+              {is_liked ? (
+                <Icon icon="heart_full" size={24} onClick={onLike} />
+              ) : (
+                <Icon icon="heart" size={24} onClick={onLike} />
+              )}
             </div>
           )}
         </div>

src/components/node/NodePanelInner/styles.scss

@@ -124,3 +124,39 @@
 
 .sep {
 }
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  45% {
+    transform: scale(1);
+  }
+
+  60% {
+    transform: scale(1.25);
+  }
+
+  75% {
+    transform: scale(1);
+  }
+
+  90% {
+    transform: scale(1.25);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.like {
+  transition: fill, stroke 0.25s;
+  will-change: transform;
+
+  &:hover {
+    fill: $red;
+    animation: pulse 0.75s infinite;
+  }
+}

src/sprites/Sprites.tsx

@@ -49,6 +49,11 @@ const Sprites: FC<{}> = () => (
       <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
     </g>
 
+    <g id="heart_full" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+    </g>
+
     <g id="edit" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />