improve animation

husarion · Apr 16, 2024 · edba130 · edba130
1 parent 4d64fc7
commit edba130
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/packages/studio-base/src/panels/Joy/DirectionalPad.tsx b/packages/studio-base/src/panels/Joy/DirectionalPad.tsx
@@ -98,6 +98,7 @@ function DirectionalPad(props: DirectionalPadProps): JSX.Element {
       if (joystickHeadRef.current) {
         joystickHeadRef.current.style.cursor = "";
         joystickHeadRef.current.style.transform = "";
+        joystickHeadRef.current.style.animation = "glow 0.6s alternate infinite";
       }
     }
   }, [isDragging, speed, onSpeedChange]);

diff --git a/packages/studio-base/src/panels/Joy/styles.css b/packages/studio-base/src/panels/Joy/styles.css
@@ -55,15 +55,21 @@ body {
   background-image: linear-gradient(var(--rotate), #5dffdc, #3ce367 43%, #4ec200);
   position: absolute;
   z-index: -1;
-  animation: spin 2.5s linear infinite;
+  animation: spin 2s linear infinite;
 }
 
 @keyframes spin {
   0% {
     --rotate: 0deg;
+    transform: scale(1);
+  }
+  50% {
+    --rotate: 180deg;
+    transform: scale(1.02);
   }
   100% {
     --rotate: 360deg;
+    transform: scale(1);
   }
 }
 
@@ -75,20 +81,15 @@ body {
   height: 130px;
   cursor: grab;
 
-  animation-name: glow;
-  animation-duration: 0.6s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-  animation-timing-function: ease-in-out;
-  animation-delay: 4s;
+  animation: glow 0.6s alternate infinite;
 }
 
 @keyframes glow {
   0% {
     transform: scale(1);
   }
   100% {
-    transform: scale(1.1);
+    transform: scale(1.15);
   }
 }