diff --git a/core/src/utils/animation/animation-utils.ts b/core/src/utils/animation/animation-utils.ts
index 2779426bcb..a51ff277a5 100644
--- a/core/src/utils/animation/animation-utils.ts
+++ b/core/src/utils/animation/animation-utils.ts
@@ -114,7 +114,8 @@ export const generateKeyframeName = (keyframeRules: string) => {
 };
 
 export const getStyleContainer = (element: HTMLElement) => {
-  const rootNode = element.getRootNode() as any;
+  // getRootNode is not always available in SSR environments.
+  const rootNode = element.getRootNode !== undefined ? (element.getRootNode() as any) : element;
   return rootNode.head || rootNode;
 };
 
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index a426952730..25a866a5de 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -1,4 +1,5 @@
 import { raf } from '../helpers';
+import { win } from '../window';
 
 import type {
   Animation,
@@ -83,7 +84,8 @@ export const createAnimation = (animationId?: string): Animation => {
   const _afterAddWriteFunctions: any[] = [];
   const webAnimations: any[] = [];
   const supportsAnimationEffect =
-    typeof (AnimationEffect as any) === 'function' || typeof (window as any).AnimationEffect === 'function';
+    typeof (AnimationEffect as any) === 'function' ||
+    (win !== undefined && typeof (win as any).AnimationEffect === 'function');
   const supportsWebAnimations =
     typeof (Element as any) === 'function' &&
     typeof (Element as any).prototype!.animate === 'function' &&