From 5b8f108316b0a8141a443599740343fc5a8283f2 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 6 May 2025 17:02:03 -0500
Subject: [PATCH] Gentler react animation

---
 app/assets/stylesheets/animation.css            | 2 +-
 app/assets/stylesheets/reactions.css            | 3 ++-
 app/views/cards/comments/reactions/new.html.erb | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index c99081856..d18419d47 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -10,7 +10,7 @@
 
   /* Keyframes */
   @keyframes react {
-    0%   { transform: scale(0.3);  opacity: 0; }
+    0%   { transform: scale(0.85);  opacity: 0; }
     50%  { transform: scale(1.15); opacity: 1; }
     100% { transform: scale(1); }
   }
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 392b33f62..68310d887 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -74,8 +74,9 @@
     transition: none;
 
     &.expanded {
-      animation: react 0.2s both;
+      animation: react 300ms both;
       transform: translate3d(0, 0, 0);
+      transform-origin: left center;
     }
 
     .reaction__form-label:focus {
diff --git a/app/views/cards/comments/reactions/new.html.erb b/app/views/cards/comments/reactions/new.html.erb
index ac15ca1df..5f6f57b03 100644
--- a/app/views/cards/comments/reactions/new.html.erb
+++ b/app/views/cards/comments/reactions/new.html.erb
@@ -3,7 +3,7 @@
         class: "reaction reaction__form expanded",
         html: { aria: { label: "New reaction" } },
         data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %>
-    <label class="reaction__form-label flex gap" style="--column-gap: 0.7ch;">
+    <label class="reaction__form-label flex gap" style="--column-gap: 0.4ch;">
       <figure class="reaction__avatar margin-none flex-item-no-shrink">
         <%= avatar_tag Current.user %>
       </figure>