feat: refine animation with blur filter

icelam · Feb 28, 2022 · 1025350 · 1025350
1 parent 70994da
commit 1025350
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/assets/js/Slot.ts b/src/assets/js/Slot.ts
@@ -73,11 +73,12 @@ export default class Slot {
     // Create reel animation
     this.reelAnimation = this.reelContainer?.animate(
       [
-        { transform: 'none' },
+        { transform: 'none', filter: 'blur(0)' },
+        { filter: 'blur(1px)', offset: 0.5 },
         // Here we transform the reel to move up and stop at the top of last item
         // "(Number of item - 1) * height of reel item" of wheel is the amount of pixel to move up
         // 7.5rem * 16 = 120px, which equals to reel item height
-        { transform: `translateY(-${(this.maxReelItems - 1) * (7.5 * 16)}px)` }
+        { transform: `translateY(-${(this.maxReelItems - 1) * (7.5 * 16)}px)`, filter: 'blur(0)' }
       ],
       {
         duration: this.maxReelItems * 100, // 100ms for 1 item