From 5d391bd1986a9236d192dc7cf344b2a033910af6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 13:50:24 -0500
Subject: [PATCH] add some animations to reactions

---
 .../src/components/MkReactionsViewer.reaction.vue | 15 ++++++++++++++-
 packages/client/src/style.scss                    | 15 +++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 1aee52571..f21fe175a 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -98,7 +98,20 @@ useTooltip(buttonRef, async (showing) => {
 	padding: 0 6px;
 	border-radius: 4px;
 	pointer-events: all;
-
+	animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+	:deep(.mk-emoji) {
+		animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
+		transition: transform .4s cubic-bezier(0,0,0,6);
+	}
+	&.reacted :deep(.mk-emoji) {
+		transition: transform .4s cubic-bezier(0,0,0,1);
+	}
+	&:active {
+		:deep(.mk-emoji) {
+			transition: transform .4s cubic-bezier(0,0,0,1);
+			transform: scale(.85);
+		}
+	}
 	&.canToggle {
 		background: rgba(0, 0, 0, 0.05);
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 819bbecb5..ea16f054c 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -615,3 +615,18 @@ hr {
     transform:  scaleX(1.00) scaleY(1.00) ;
   }
 }
+
+@media(prefers-reduced-motion: no-preference) {
+	@keyframes scaleIn {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+	}
+	@keyframes scaleInSmall {
+		from {
+			transform: scale(.8);
+			opacity: 0;
+		}
+	}
+}