diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx
index 9ae14292571b..a4b3507ec051 100644
--- a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx
+++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx
@@ -11,6 +11,7 @@ import {
   ToggleGroupButton,
   Text,
   Switch,
+  SmallToggleButton,
 } from "@webstudio-is/design-system";
 import { useIds } from "~/shared/form-utils";
 import type { PropAndMeta } from "../use-props-logic";
@@ -25,7 +26,7 @@ import {
   insetUnitValueSchema,
   RANGE_UNITS,
 } from "@webstudio-is/sdk";
-import { RepeatColumnIcon, RepeatRowIcon } from "@webstudio-is/icons";
+import { BugIcon, RepeatColumnIcon, RepeatRowIcon } from "@webstudio-is/icons";
 import { AnimationsSelect } from "./animations-select";
 import { SubjectSelect } from "./subject-select";
 import { toValue, type StyleValue } from "@webstudio-is/css-engine";
@@ -200,15 +201,48 @@ export const AnimateSection = ({
       <Separator />
 
       <Grid
-        gap={1}
+        gap={2}
         align={"center"}
         css={{
-          gridTemplateColumns: "1fr auto",
+          gridTemplateColumns: "1fr auto auto",
           padding: theme.panel.paddingInline,
         }}
       >
         <Text variant={"titles"}>Animation</Text>
 
+        <Tooltip
+          content={
+            value.debug ? (
+              "Stop Debugging"
+            ) : (
+              <Text>
+                Debug <small>(experimental)</small>
+              </Text>
+            )
+          }
+        >
+          <SmallToggleButton
+            css={
+              value.debug
+                ? {
+                    color: theme.colors.foregroundDestructive,
+                    "&:hover": {
+                      color: theme.colors.foregroundDestructive,
+                      opacity: 0.8,
+                    },
+                  }
+                : undefined
+            }
+            pressed={value.debug ?? false}
+            onPressedChange={() => {
+              handleChange({ ...value, debug: !value.debug });
+            }}
+            variant="normal"
+            tabIndex={-1}
+            icon={<BugIcon />}
+          />
+        </Tooltip>
+
         <Tooltip content={value.isPinned ? "Unpin Animation" : "Pin Animation"}>
           <Switch
             checked={value.isPinned ?? false}
diff --git a/packages/sdk-components-animation/private-src b/packages/sdk-components-animation/private-src
index 4ea51f4ca02a..5a0db5b45e28 160000
--- a/packages/sdk-components-animation/private-src
+++ b/packages/sdk-components-animation/private-src
@@ -1 +1 @@
-Subproject commit 4ea51f4ca02a44eec97acb13a463c7f15eb266a0
+Subproject commit 5a0db5b45e2845d6b38127d79e298896da522507
diff --git a/packages/sdk/src/schema/animation-schema.ts b/packages/sdk/src/schema/animation-schema.ts
index 1e972d9fbf76..69628cfdd431 100644
--- a/packages/sdk/src/schema/animation-schema.ts
+++ b/packages/sdk/src/schema/animation-schema.ts
@@ -171,6 +171,7 @@ export const scrollActionSchema = z.object({
   axis: animationAxisSchema.optional(),
   animations: z.array(scrollAnimationSchema),
   isPinned: z.boolean().optional(),
+  debug: z.boolean().optional(),
 });
 
 export const viewAnimationSchema = baseAnimation.merge(
@@ -191,6 +192,7 @@ export const viewActionSchema = z.object({
   insetEnd: insetUnitValueSchema.optional(),
 
   isPinned: z.boolean().optional(),
+  debug: z.boolean().optional(),
 });
 
 // Animation Action