From 8a924f33cdf3e5d623a2212bf7542ac96a043624 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 16 Jan 2024 21:15:19 -0500
Subject: [PATCH] feat: detect if web animations is supported and fallback

---
 core/src/components/item-sliding/item-sliding.tsx | 11 ++++++++++-
 core/src/utils/animation/animation.ts             |  9 +++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index d7c49adc8c..8bc4e2317c 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -1,7 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { supportsWebAnimations } from '@utils/animation/animation';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import { isEndSide } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { watchForOptions } from '@utils/watch-options';
 
@@ -136,6 +138,13 @@ export class ItemSliding implements ComponentInterface {
     }
   }
 
+  componentWillLoad() {
+    if (!supportsWebAnimations && this.animationType === 'modern') {
+      printIonWarning('Animation type "modern" needs Web Animations API support. Falling back to "legacy".');
+      this.animationType = 'legacy';
+    }
+  }
+
   /**
    * Get the amount the item is open in pixels.
    */
@@ -260,7 +269,7 @@ export class ItemSliding implements ComponentInterface {
 
   /**
    * Given a side, return the width of the options on that side.
-   * 
+   *
    * @param side The side of the options to get the width for.
    */
   private getOptionsWidth(side: 'start' | 'end'): number {
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index f8940a07c7..09c73c226c 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -38,6 +38,15 @@ type AnimationOnStopCallback = AnimationOnFinishCallback;
  */
 type AnimationReadWriteCallback = () => void;
 
+export const supportsAnimationEffect =
+  typeof (AnimationEffect as any) === 'function' ||
+  (win !== undefined && typeof (win as any).AnimationEffect === 'function');
+
+export const supportsWebAnimations =
+  typeof (Element as any) === 'function' &&
+  typeof (Element as any).prototype!.animate === 'function' &&
+  supportsAnimationEffect;
+
 export const createAnimation = (animationId?: string): Animation => {
   let _delay: number | undefined;
   let _duration: number | undefined;