From 7939b7cadae54ba707c7b0ece62ae30153a65ce1 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 25 Jul 2024 16:02:22 -0500
Subject: [PATCH] Splat animation

---
 app/assets/stylesheets/animation.css |  8 ++++++++
 app/assets/stylesheets/splats.css    | 14 ++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index f6da1028c..db7f9a493 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -10,3 +10,11 @@
   50% { transform: translateX(-1rem); }
   75% { transform: translateX(1rem); }
 }
+
+@keyframes splat {
+  0% { transform: scale(150%); opacity: 0; }
+  29% { transform: scale(150%); opacity: 0; }
+  30% { transform: scale(150%); opacity: 0.5; }
+  80% { transform: scale(90%); opacity: 1; }
+  100% { transform: scale(100%); }
+}
diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css
index ab962e9bf..f8031f55a 100644
--- a/app/assets/stylesheets/splats.css
+++ b/app/assets/stylesheets/splats.css
@@ -29,6 +29,20 @@
   place-items: center;
   position: relative;
 
+  .windshield & {
+    animation: splat 200ms normal forwards ease-in-out;
+
+    &:nth-of-type(2n) {
+      animation-delay: 50ms;
+    }
+
+    &:nth-of-type(4n) {
+      animation-delay: 100ms;
+    }
+
+    [data-turbo-preview] & { animation: none; }
+  }
+
   > * {
     grid-area: 1/1;
   }