From c6a044416afa88d3d96b94c14e0b0f0cfb87708f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 1 Dec 2022 15:38:59 -0500
Subject: [PATCH] remove transform from animations

---
 src/components/alert/alert.ts                |  8 ++--
 src/components/dialog/dialog.ts              | 10 ++--
 src/components/drawer/drawer.ts              | 50 ++++++++++----------
 src/components/dropdown/dropdown.ts          |  8 ++--
 src/components/range/range.ts                |  4 +-
 src/components/tab-group/tab-group.styles.ts |  2 +-
 src/components/tab-group/tab-group.ts        |  4 +-
 src/components/tooltip/tooltip.ts            |  8 ++--
 8 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index 26fa0c633..7ad448343 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -225,16 +225,16 @@ export default class SlAlert extends ShoelaceElement {
 
 setDefaultAnimation('alert.show', {
   keyframes: [
-    { opacity: 0, transform: 'scale(0.8)' },
-    { opacity: 1, transform: 'scale(1)' }
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 setDefaultAnimation('alert.hide', {
   keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.8)' }
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
   ],
   options: { duration: 250, easing: 'ease' }
 });
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index c77030109..5c61bfe91 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -311,22 +311,22 @@ export default class SlDialog extends ShoelaceElement {
 
 setDefaultAnimation('dialog.show', {
   keyframes: [
-    { opacity: 0, transform: 'scale(0.8)' },
-    { opacity: 1, transform: 'scale(1)' }
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 setDefaultAnimation('dialog.hide', {
   keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.8)' }
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 setDefaultAnimation('dialog.denyClose', {
-  keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }],
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
   options: { duration: 250 }
 });
 
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index cce1d2244..e83dc994f 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -343,16 +343,16 @@ export default class SlDrawer extends ShoelaceElement {
 // Top
 setDefaultAnimation('drawer.showTop', {
   keyframes: [
-    { opacity: 0, transform: 'translateY(-100%)' },
-    { opacity: 1, transform: 'translateY(0)' }
+    { opacity: 0, translate: '0 -100%' },
+    { opacity: 1, translate: '0 0' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 setDefaultAnimation('drawer.hideTop', {
   keyframes: [
-    { opacity: 1, transform: 'translateY(0)' },
-    { opacity: 0, transform: 'translateY(-100%)' }
+    { opacity: 1, translate: '0 0' },
+    { opacity: 0, translate: '0 -100%' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
@@ -360,24 +360,24 @@ setDefaultAnimation('drawer.hideTop', {
 // End
 setDefaultAnimation('drawer.showEnd', {
   keyframes: [
-    { opacity: 0, transform: 'translateX(100%)' },
-    { opacity: 1, transform: 'translateX(0)' }
+    { opacity: 0, translate: '100%' },
+    { opacity: 1, translate: '0' }
   ],
   rtlKeyframes: [
-    { opacity: 0, transform: 'translateX(-100%)' },
-    { opacity: 1, transform: 'translateX(0)' }
+    { opacity: 0, translate: '-100%' },
+    { opacity: 1, translate: '0' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 setDefaultAnimation('drawer.hideEnd', {
   keyframes: [
-    { opacity: 1, transform: 'translateX(0)' },
-    { opacity: 0, transform: 'translateX(100%)' }
+    { opacity: 1, translate: '0' },
+    { opacity: 0, translate: '100%' }
   ],
   rtlKeyframes: [
-    { opacity: 1, transform: 'translateX(0)' },
-    { opacity: 0, transform: 'translateX(-100%)' }
+    { opacity: 1, translate: '0' },
+    { opacity: 0, translate: '-100%' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
@@ -385,16 +385,16 @@ setDefaultAnimation('drawer.hideEnd', {
 // Bottom
 setDefaultAnimation('drawer.showBottom', {
   keyframes: [
-    { opacity: 0, transform: 'translateY(100%)' },
-    { opacity: 1, transform: 'translateY(0)' }
+    { opacity: 0, translate: '0 100%' },
+    { opacity: 1, translate: '0 0' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 setDefaultAnimation('drawer.hideBottom', {
   keyframes: [
-    { opacity: 1, transform: 'translateY(0)' },
-    { opacity: 0, transform: 'translateY(100%)' }
+    { opacity: 1, translate: '0 0' },
+    { opacity: 0, translate: '0 100%' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
@@ -402,31 +402,31 @@ setDefaultAnimation('drawer.hideBottom', {
 // Start
 setDefaultAnimation('drawer.showStart', {
   keyframes: [
-    { opacity: 0, transform: 'translateX(-100%)' },
-    { opacity: 1, transform: 'translateX(0)' }
+    { opacity: 0, translate: '-100%' },
+    { opacity: 1, translate: '0' }
   ],
   rtlKeyframes: [
-    { opacity: 0, transform: 'translateX(100%)' },
-    { opacity: 1, transform: 'translateX(0)' }
+    { opacity: 0, translate: '100%' },
+    { opacity: 1, translate: '0' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 setDefaultAnimation('drawer.hideStart', {
   keyframes: [
-    { opacity: 1, transform: 'translateX(0)' },
-    { opacity: 0, transform: 'translateX(-100%)' }
+    { opacity: 1, translate: '0' },
+    { opacity: 0, translate: '-100%' }
   ],
   rtlKeyframes: [
-    { opacity: 1, transform: 'translateX(0)' },
-    { opacity: 0, transform: 'translateX(100%)' }
+    { opacity: 1, translate: '0' },
+    { opacity: 0, translate: '100%' }
   ],
   options: { duration: 250, easing: 'ease' }
 });
 
 // Deny close
 setDefaultAnimation('drawer.denyClose', {
-  keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.01)' }, { transform: 'scale(1)' }],
+  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],
   options: { duration: 250 }
 });
 
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 90c906e87..f33205750 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -441,16 +441,16 @@ export default class SlDropdown extends ShoelaceElement {
 
 setDefaultAnimation('dropdown.show', {
   keyframes: [
-    { opacity: 0, transform: 'scale(0.9)' },
-    { opacity: 1, transform: 'scale(1)' }
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
   ],
   options: { duration: 100, easing: 'ease' }
 });
 
 setDefaultAnimation('dropdown.hide', {
   keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.9)' }
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
   ],
   options: { duration: 100, easing: 'ease' }
 });
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 4937c9789..c604a73fa 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -232,10 +232,10 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
       // off depending on the size of the control, thumb, and tooltip dimensions.
       if (isRtl) {
         const x = `${inputWidth - percentAsWidth}px + ${percent} * ${thumbSize}`;
-        this.output.style.transform = `translateX(calc((${x} - ${tooltipWidth / 2}px - ${thumbSize} / 2)))`;
+        this.output.style.translate = `calc((${x} - ${tooltipWidth / 2}px - ${thumbSize} / 2))`;
       } else {
         const x = `${percentAsWidth}px - ${percent} * ${thumbSize}`;
-        this.output.style.transform = `translateX(calc(${x} - ${tooltipWidth / 2}px + ${thumbSize} / 2))`;
+        this.output.style.translate = `calc(${x} - ${tooltipWidth / 2}px + ${thumbSize} / 2)`;
       }
     }
   }
diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
index f28275c9f..0bd5bede0 100644
--- a/src/components/tab-group/tab-group.styles.ts
+++ b/src/components/tab-group/tab-group.styles.ts
@@ -24,7 +24,7 @@ export default css`
 
   .tab-group__indicator {
     position: absolute;
-    transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
+    transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) width ease;
   }
 
   .tab-group--has-scroll-controls .tab-group__nav-container {
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index b0c69d899..d850c6f6a 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -331,14 +331,14 @@ export default class SlTabGroup extends ShoelaceElement {
       case 'bottom':
         this.indicator.style.width = `${width}px`;
         this.indicator.style.height = 'auto';
-        this.indicator.style.transform = isRtl ? `translateX(${-1 * offset.left}px)` : `translateX(${offset.left}px)`;
+        this.indicator.style.translate = isRtl ? `${-1 * offset.left}px` : `${offset.left}px`;
         break;
 
       case 'start':
       case 'end':
         this.indicator.style.width = 'auto';
         this.indicator.style.height = `${height}px`;
-        this.indicator.style.transform = `translateY(${offset.top}px)`;
+        this.indicator.style.translate = `${offset.top}px`;
         break;
     }
   }
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 3e73bec94..a3c5ddef6 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -302,16 +302,16 @@ export default class SlTooltip extends ShoelaceElement {
 
 setDefaultAnimation('tooltip.show', {
   keyframes: [
-    { opacity: 0, transform: 'scale(0.8)' },
-    { opacity: 1, transform: 'scale(1)' }
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
   ],
   options: { duration: 150, easing: 'ease' }
 });
 
 setDefaultAnimation('tooltip.hide', {
   keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.8)' }
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
   ],
   options: { duration: 150, easing: 'ease' }
 });