diff --git a/packages/react/src/components/Toast/ToastProvider.tsx b/packages/react/src/components/Toast/ToastProvider.tsx
index f1c4011..b2d9ea0 100644
--- a/packages/react/src/components/Toast/ToastProvider.tsx
+++ b/packages/react/src/components/Toast/ToastProvider.tsx
@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useContext, useMemo, useRef } from "react";
+import isChromatic from "chromatic/isChromatic";
 import { Toast, ToastProps } from ":/components/Toast/index";
 import { tokens } from ":/cunningham-tokens";
 import { Queue } from ":/utils/Queue";
@@ -100,7 +101,7 @@ export const ToastProvider = ({ children }: PropsWithChildren) => {
 
     // PLAY
     // We need to check if the animate function exists because it's not available in some testing environments ( like jest-dom )
-    if (typeof container.current.animate === "function") {
+    if (typeof container.current.animate === "function" && !isChromatic()) {
       container.current.animate(
         [
           { transform: `translateY(${invert}px)` },
diff --git a/packages/react/src/components/Toast/index.tsx b/packages/react/src/components/Toast/index.tsx
index d750ae4..83e8953 100644
--- a/packages/react/src/components/Toast/index.tsx
+++ b/packages/react/src/components/Toast/index.tsx
@@ -6,6 +6,7 @@ import React, {
   useRef,
 } from "react";
 import classNames from "classnames";
+import isChromatic from "chromatic/isChromatic";
 import { Button, ButtonProps } from ":/components/Button";
 import { iconFromType, VariantType } from ":/utils/VariantUtils";
 
@@ -105,6 +106,9 @@ export const ProgressBar = ({ duration }: { duration: number }) => {
   const content = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (isChromatic()) {
+      return;
+    }
     content.current!.animate([{ width: "0%" }, { width: "100%" }], {
       duration,
       easing: "linear",