Improve bubble animation effect

app/assets/stylesheets/animation.css

@@ -35,10 +35,19 @@
 }
 
 @keyframes wobble {
-  15%  { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
-  25%  { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
-  33%  { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
-  50%  { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
-  75%  { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
-  100% { transform: rotate(180deg); }
+  0%  { transform: rotate(calc(var(--bubble-rotate) + 90deg)); }
+  15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
+  25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
+  33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
+  50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
+  75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
+}
+
+@keyframes wobble-alt {
+  0%  { transform: rotate(calc(var(--bubble-rotate) + -90deg)); }
+  12% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
+  25% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
+  33% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
+  50% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
+  75% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
 }

app/assets/stylesheets/bubbles.css

@@ -50,14 +50,6 @@
 
   [data-turbo-preview] & { animation: none; }
 
-  @media (hover: hover) {
-    .windshield &:hover {
-      .bubble__shape {
-        animation: wobble 1200ms normal forwards ease-out;
-      }
-    }
-  }
-
   > * {
     grid-area: 1/1;
   }
@@ -428,11 +420,6 @@
         background-color: color(from var(--bubble-color) srgb r g b / 0.15);
         border: 0;
         border-radius: 0.6em;
-
-        .bubble__shape {
-          animation: wobble 1200ms normal forwards ease-out;
-          transform: rotate(var(--bubble-rotate)) scale(1.2);
-        }
       }
     }
   }
@@ -480,6 +467,7 @@
   position: relative;
   transform: rotate(var(--bubble-rotate));
   transition: 200ms ease-out;
+  z-index: 0;
 
   .bubble & {
     background-color: color(from var(--bubble-color) srgb r g b / 0.15);
@@ -495,4 +483,13 @@
   .bubble__perma & {
     stroke-width: 0.6em;
   }
+
+  .windshield .bubble--wobble & {
+    animation: wobble 1200ms normal forwards ease-out;
+  }
+
+  .bubble--wobble:nth-child(even) & {
+    animation-name: wobble-alt;
+    animation-duration: 900ms;
+  }
 }

app/javascript/controllers/animation_controller.js

@@ -3,6 +3,13 @@ import { nextFrame } from "helpers/timing_helpers"
 
 export default class extends Controller {
   static classes = [ "play" ]
+  static values = { playOnLoad: { type: Boolean, default: false } }
+
+  connect() {
+    if (this.playOnLoadValue) {
+      this.play()
+    }
+  }
 
   async play() {
     await nextFrame()

app/views/bubbles/_bubble.html.erb

@@ -1,7 +1,8 @@
 <% cache bubble do %>
   <div class="bubble"
     style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>"
-    data-controller="upload-preview">
+    data-controller="animation upload-preview"
+    data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
 
     <h1 class="bubble__title">
       <%= turbo_frame_tag bubble, :edit do %>

app/views/bubbles/list/_bubble.html.erb

@@ -1,4 +1,5 @@
-<li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>">
+<li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
+    data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
   <div class="bubble__shape"></div>
 
   <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex align-center gap flex-item-grow min-width" do %>