diff --git a/docs/feature-flags.md b/docs/feature-flags.md
index 056dc34c..16eacf4e 100644
--- a/docs/feature-flags.md
+++ b/docs/feature-flags.md
@@ -20,6 +20,7 @@ import { ChaiBuilderEditor } from "@chaibuilder/sdk";
     dragAndDrop: true,
     validateStructure: true,
     designTokens: true,
+    animation: true,
   }}
   // ... other props
 />;
@@ -40,6 +41,7 @@ import { ChaiBuilderEditor } from "@chaibuilder/sdk";
 | `designTokens`      | `false` | Enable design tokens feature           |
 | `librarySite`       | `false` | Enable library site features           |
 | `gotoSettings`      | `false` | Enable settings navigation             |
+| `animation`         | `false` | Enable animation feature               |
 
 ## Custom Feature Flags
 
diff --git a/docs/types-reference.md b/docs/types-reference.md
index e1c35e1e..fb485b3a 100644
--- a/docs/types-reference.md
+++ b/docs/types-reference.md
@@ -115,6 +115,7 @@ interface ChaiBuilderEditorProps {
     dragAndDrop?: boolean;
     validateStructure?: boolean;
     designTokens?: boolean;
+    animation?: boolean;
   };
 
   // Advanced
diff --git a/src/Editor.tsx b/src/Editor.tsx
index ee3cf3b1..d6e36f9d 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -32,6 +32,7 @@ function ChaiBuilderDefault() {
         importTheme: false,
         dragAndDrop: true,
         designTokens: true,
+        animation: true,
       }}
       gotoPage={(args) => {
         console.log("gotoPage", args);
diff --git a/src/core/components/settings/new-panel/attributes-editor.tsx b/src/core/components/settings/new-panel/attributes-editor.tsx
index 080aba58..b1bc33e7 100644
--- a/src/core/components/settings/new-panel/attributes-editor.tsx
+++ b/src/core/components/settings/new-panel/attributes-editor.tsx
@@ -6,8 +6,8 @@ import { Button } from "@/ui/shadcn/components/ui/button";
 import { Input } from "@/ui/shadcn/components/ui/input";
 import { Label } from "@/ui/shadcn/components/ui/label";
 import { Textarea } from "@/ui/shadcn/components/ui/textarea";
+import { Cross1Icon, Pencil2Icon } from "@radix-ui/react-icons";
 import { isEmpty } from "lodash-es";
-import { Pencil2Icon, Cross1Icon } from "@radix-ui/react-icons";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -42,7 +42,7 @@ export default React.memo(function AttrsEditor({
 
   const addAttribute = () => {
     if (newKey.startsWith("@")) {
-      setError(t('Attribute keys cannot start with @'));
+      setError(t("Attribute keys cannot start with @"));
       return;
     }
     if (newKey) {
@@ -69,7 +69,7 @@ export default React.memo(function AttrsEditor({
 
   const saveEdit = () => {
     if (newKey.startsWith("@")) {
-      setError(t('Attribute keys cannot start with @'));
+      setError(t("Attribute keys cannot start with @"));
       return;
     }
     if (editIndex !== null && newKey) {
@@ -171,10 +171,10 @@ export default React.memo(function AttrsEditor({
           editIndex !== null ? saveEdit() : addAttribute();
         }}
         className="space-y-3">
-        <div className="flex flex-col gap-y-1">
-          <div className="w-full">
-            <Label htmlFor="attrKey" className="text-[11px] font-normal leading-tight text-slate-600">
-              {t('Key')}
+        <div className="space-y-2">
+          <div>
+            <Label htmlFor="attrKey" className="mb-1 block text-[11px] font-medium text-gray-700">
+              {t("Key")}
             </Label>
             <Input
               autoCapitalize={"off"}
@@ -184,14 +184,14 @@ export default React.memo(function AttrsEditor({
               ref={keyInputRef}
               value={newKey}
               onChange={(e) => setNewKey(e.target.value)}
-              placeholder={t('Enter key')}
-              className="py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
+              placeholder={t("Enter key")}
+              className="h-7 text-[11px] transition-colors focus:border-primary focus:ring-1 focus:ring-primary"
             />
           </div>
-          <div className="w-full">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="attrValue" className="text-[11px] font-normal text-slate-600">
-                {t('Value')}
+          <div>
+            <div className="mb-1 flex items-center justify-between">
+              <Label htmlFor="attrValue" className="text-[11px] font-medium text-gray-700">
+                {t("Value")}
               </Label>
               {!isEmpty(pageExternalData) && <NestedPathSelector data={pageExternalData} onSelect={handlePathSelect} />}
             </div>
@@ -204,37 +204,39 @@ export default React.memo(function AttrsEditor({
               value={newValue}
               onChange={(e) => setNewValue(e.target.value)}
               onKeyDown={handleKeyDown}
-              placeholder={t('Enter value')}
-              className="text-xs font-normal leading-tight placeholder:text-slate-400"
+              placeholder={t("Enter value")}
+              className="min-h-[60px] resize-y text-[11px] transition-colors focus:border-primary focus:ring-1 focus:ring-primary"
             />
           </div>
         </div>
         <div className="flex justify-end">
           <Button type="submit" disabled={!newKey.length} variant="default" size="sm" className="h-8 w-24 text-xs">
-            {editIndex !== null ? t('Save') : t('Add')}
+            {editIndex !== null ? t("Save") : t("Add")}
           </Button>
         </div>
         {error && <p className="text-xs text-red-500">{error}</p>}
       </form>
 
-      <div className="space-y-1 py-4">
-        {attributes.map((attr, index) => (
-          <div key={index} className="flex items-center justify-between rounded border p-2 text-sm">
-            <div className="flex flex-col text-xs leading-tight">
-              <span className="truncate text-[12px] font-light text-muted-foreground">{attr.key}</span>
-              <span className="max-w-[200px] text-wrap font-normal">{attr.value.toString()}</span>
+      {attributes?.length > 0 && (
+        <div className="space-y-1 pt-4">
+          {attributes.map((attr, index) => (
+            <div key={index} className="flex items-center justify-between rounded border p-2 text-sm">
+              <div className="flex flex-col text-xs leading-tight">
+                <span className="truncate text-[12px] font-light text-muted-foreground">{attr.key}</span>
+                <span className="max-w-[200px] text-wrap font-normal">{attr.value.toString()}</span>
+              </div>
+              <div className="flex-shrink-0 text-slate-400">
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => startEdit(index)}>
+                  <Pencil2Icon className="h-3 w-3" />
+                </Button>
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeAttribute(index)}>
+                  <Cross1Icon className="h-3 w-3" />
+                </Button>
+              </div>
             </div>
-            <div className="flex-shrink-0 text-slate-400">
-              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => startEdit(index)}>
-                <Pencil2Icon className="h-3 w-3" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeAttribute(index)}>
-                <Cross1Icon className="h-3 w-3" />
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 });
diff --git a/src/core/components/settings/new-panel/block-attributes-editor.tsx b/src/core/components/settings/new-panel/block-attributes-editor.tsx
index 92f7b604..3d1bf6c7 100644
--- a/src/core/components/settings/new-panel/block-attributes-editor.tsx
+++ b/src/core/components/settings/new-panel/block-attributes-editor.tsx
@@ -13,7 +13,9 @@ export const BlockAttributesEditor = React.memo(() => {
   const attrKey = `${get(selectedStylingBlock, "0.prop")}_attrs`;
 
   React.useEffect(() => {
-    const _attributes = map(get(block, attrKey), (value, key) => ({ key, value }));
+    const _attributes = map(get(block, attrKey), (value, key) => ({ key, value })).filter(
+      (attr) => attr.key !== "data-animation",
+    );
     if (!isEmpty(_attributes)) setAttributes(_attributes as any);
     else setAttributes([]);
 
@@ -23,6 +25,11 @@ export const BlockAttributesEditor = React.memo(() => {
   const updateAttributes = React.useCallback(
     (updatedAttributes: any = []) => {
       const _attrs = {};
+      // Preserve existing data-animation if it exists
+      const existingAnimation = get(block, `${attrKey}.data-animation`);
+      if (existingAnimation) {
+        set(_attrs, "data-animation", existingAnimation);
+      }
       forEach(updatedAttributes, (item) => {
         if (!isEmpty(item.key)) {
           set(_attrs, item.key, item.value);
@@ -34,7 +41,7 @@ export const BlockAttributesEditor = React.memo(() => {
   );
 
   return (
-    <div className="flex-col gap-y-2">
+    <div className="flex-col gap-y-2 px-2 pb-2">
       <div className="flex flex-col">
         <div>
           <AttrsEditor preloadedAttributes={attributes} onAttributesChange={updateAttributes} />
diff --git a/src/core/components/settings/settings-panel.tsx b/src/core/components/settings/settings-panel.tsx
index 556dc852..c884f414 100644
--- a/src/core/components/settings/settings-panel.tsx
+++ b/src/core/components/settings/settings-panel.tsx
@@ -11,6 +11,7 @@ import {
   useSelectedStylingBlocks,
 } from "@/core/hooks";
 import { PERMISSIONS, usePermissions } from "@/core/main";
+import AnimationField from "@/render/animation/animation-field";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/shadcn/components/ui/tabs";
 import { ChevronDownIcon, MixerHorizontalIcon } from "@radix-ui/react-icons";
 import { isEmpty, isNull, noop } from "lodash-es";
@@ -28,17 +29,17 @@ function BlockAttributesToggle() {
     return null;
   }
   return (
-    <>
+    <div className="my-1 h-max rounded border">
       <div
         onClick={() => setShowAttributes(!showAttributes)}
-        className="flex cursor-pointer items-center justify-between border-t border-border py-3 text-xs font-medium hover:underline">
+        className={`flex cursor-pointer items-center justify-between p-2 text-xs font-medium hover:bg-blue-50`}>
         <span>{t("Attributes")}</span>
         <span>
           <ChevronDownIcon className={"h-4 w-4 text-gray-500 " + (showAttributes ? "rotate-180" : "")} />
         </span>
       </div>
       {showAttributes && <BlockAttributesEditor />}
-    </>
+    </div>
   );
 }
 
@@ -128,6 +129,7 @@ const SettingsPanel: React.FC = () => {
             <ResetStylesButton />
           </div>
           <BlockStyling />
+          <AnimationField />
           <BlockAttributesToggle />
           <br />
           <br />
@@ -171,6 +173,7 @@ const SettingsPanel: React.FC = () => {
           value="styles"
           className="no-scrollbar h-full max-h-min max-w-full overflow-y-auto overflow-x-hidden">
           <BlockStyling />
+          <AnimationField />
           <BlockAttributesToggle />
           <br />
           <br />
diff --git a/src/core/main/index.ts b/src/core/main/index.ts
index f4e764f8..436edc5a 100644
--- a/src/core/main/index.ts
+++ b/src/core/main/index.ts
@@ -29,6 +29,7 @@ export { BlockAttributesEditor as ChaiBlockAttributesEditor } from "@/core/compo
 export { DefaultChaiBlocks as ChaiDefaultBlocks } from "@/core/components/sidepanels/panels/add-blocks/default-blocks";
 export { ChaiDraggableBlock } from "@/core/components/sidepanels/panels/add-blocks/draggable-block";
 export { ExportCodeModal as ChaiExportCodeModal } from "@/core/modals/export-code-modal";
+export { default as ChaiAnimationContainer } from "@/render/animation/animation-container";
 export {
   AddBlocksPanel as ChaiAddBlocksPanel,
   BlockPropsEditor as ChaiBlockPropsEditor,
@@ -37,42 +38,42 @@ export {
   ImportHTML as ChaiImportHTML,
   Outline as ChaiOutline,
   ThemeConfigPanel as ChaiThemeConfigPanel,
-  UILibrariesPanel as ChaiUILibrariesPanel
+  UILibrariesPanel as ChaiUILibrariesPanel,
 };
 
 // i18n
-  export { i18n };
+export { i18n };
 
 // helper functions
-  export { generateUUID as generateBlockId, cn as mergeClasses } from "@/core/functions/common-functions";
-  export { getClassValueAndUnit } from "@/core/functions/helper-fn";
-  export { getBlocksFromHTML as convertHTMLToChaiBlocks, getBlocksFromHTML } from "@/core/import-html/html-to-json";
+export { generateUUID as generateBlockId, cn as mergeClasses } from "@/core/functions/common-functions";
+export { getClassValueAndUnit } from "@/core/functions/helper-fn";
+export { getBlocksFromHTML as convertHTMLToChaiBlocks, getBlocksFromHTML } from "@/core/import-html/html-to-json";
 
 // types
 export type { ChaiBlock, ChaiBuilderEditorProps };
 
 // registration apis
-  export { registerChaiAddBlockTab } from "@/core/extensions/add-block-tabs";
-  export {
-    registerBlockSettingField,
-    registerBlockSettingTemplate,
-    registerBlockSettingWidget
-  } from "@/core/extensions/blocks-settings";
-  export { registerChaiPreImportHTMLHook } from "@/core/extensions/import-html-pre-hook";
-  export { registerChaiLibrary } from "@/core/extensions/libraries";
-  export { registerChaiMediaManager } from "@/core/extensions/media-manager";
-  export { registerChaiSaveToLibrary } from "@/core/extensions/save-to-library";
-  export { registerChaiSidebarPanel } from "@/core/extensions/sidebar-panels";
-  export { registerChaiTopBar } from "@/core/extensions/top-bar";
-  export {
-    IfChaiFeatureFlag,
-    registerChaiFeatureFlag,
-    registerChaiFeatureFlags,
-    useChaiFeatureFlag,
-    useChaiFeatureFlags,
-    useToggleChaiFeatureFlag
-  } from "@/core/flags/register-chai-flag";
-  export type { ChaiLibrary, ChaiLibraryBlock } from "@/types/chaibuilder-editor-props";
+export { registerChaiAddBlockTab } from "@/core/extensions/add-block-tabs";
+export {
+  registerBlockSettingField,
+  registerBlockSettingTemplate,
+  registerBlockSettingWidget,
+} from "@/core/extensions/blocks-settings";
+export { registerChaiPreImportHTMLHook } from "@/core/extensions/import-html-pre-hook";
+export { registerChaiLibrary } from "@/core/extensions/libraries";
+export { registerChaiMediaManager } from "@/core/extensions/media-manager";
+export { registerChaiSaveToLibrary } from "@/core/extensions/save-to-library";
+export { registerChaiSidebarPanel } from "@/core/extensions/sidebar-panels";
+export { registerChaiTopBar } from "@/core/extensions/top-bar";
+export {
+  IfChaiFeatureFlag,
+  registerChaiFeatureFlag,
+  registerChaiFeatureFlags,
+  useChaiFeatureFlag,
+  useChaiFeatureFlags,
+  useToggleChaiFeatureFlag,
+} from "@/core/flags/register-chai-flag";
+export type { ChaiLibrary, ChaiLibraryBlock } from "@/types/chaibuilder-editor-props";
 
 // hooks
 export { useMediaManagerComponent } from "@/core/extensions/media-manager";
@@ -82,4 +83,3 @@ export * from "@/core/hooks";
 // constants
 export { PERMISSIONS } from "@/core/constants/PERMISSIONS";
 export type { ChaiThemeValues } from "@/types/chaibuilder-editor-props";
-
diff --git a/src/render/animation/animation-container.tsx b/src/render/animation/animation-container.tsx
new file mode 100644
index 00000000..d67fc73c
--- /dev/null
+++ b/src/render/animation/animation-container.tsx
@@ -0,0 +1,9 @@
+import "./animation-styles.css";
+import { useChaiAnimation } from "./use-chai-animation";
+
+const AnimationContainer = ({ children }) => {
+  useChaiAnimation();
+  return children;
+};
+
+export default AnimationContainer;
diff --git a/src/render/animation/animation-field.tsx b/src/render/animation/animation-field.tsx
new file mode 100644
index 00000000..b51c3638
--- /dev/null
+++ b/src/render/animation/animation-field.tsx
@@ -0,0 +1,272 @@
+import {
+  useBuilderProp,
+  useSelectedBlock,
+  useSelectedStylingBlocks,
+  useTranslation,
+  useUpdateBlocksProps,
+} from "@/core/hooks";
+import {
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  ChevronDownIcon,
+  HeightIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
+import { debounce, get, isEmpty } from "lodash-es";
+import * as React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  ANIMATION_TYPES,
+  convertToAnimationObject,
+  convertToAnimationString,
+  DEFAULT_ANIMATION,
+  EASING_OPTIONS,
+  getDirectionOptions,
+  TAnimation,
+} from "./animation-utils";
+
+const AnimationField = React.memo(() => {
+  const { t } = useTranslation();
+  const block = useSelectedBlock();
+  const [selectedStylingBlock] = useSelectedStylingBlocks();
+  const updateBlockProps = useUpdateBlocksProps();
+
+  const attrKey = `${get(selectedStylingBlock, "0.prop")}_attrs`;
+  const animationValue = get(block, `${attrKey}.data-animation`, "") as string;
+  const [show, setShow] = useState(animationValue?.length > 0);
+
+  const formData = useMemo(() => convertToAnimationObject(animationValue), [animationValue]);
+  const [localData, setLocalData] = useState<TAnimation>(formData);
+
+  useEffect(() => {
+    setLocalData(formData);
+  }, [formData]);
+
+  const updateAnimation = useCallback(
+    (value: string) => {
+      const currentAttrs = get(block, attrKey, {}) as Record<string, string>;
+      const newAttrs = { ...currentAttrs, "data-animation": value };
+      if (!value) {
+        delete newAttrs["data-animation"];
+      }
+      updateBlockProps([get(block, "_id")], { [attrKey]: newAttrs });
+      setShow(true);
+    },
+    [block, updateBlockProps, attrKey],
+  );
+
+  const debouncedOnChange = useMemo(
+    () => debounce((v: TAnimation) => updateAnimation(convertToAnimationString(v)), 300),
+    [updateAnimation],
+  );
+
+  const handleChange = useCallback(
+    (updates: any) => {
+      const newValue = { ...localData, ...updates };
+      setLocalData(newValue);
+      debouncedOnChange(newValue);
+    },
+    [localData, debouncedOnChange],
+  );
+
+  if (isEmpty(animationValue)) {
+    return (
+      <div className="my-4 flex flex-col items-center justify-center border-y py-4">
+        <button
+          onClick={() => updateAnimation(convertToAnimationString(DEFAULT_ANIMATION))}
+          className="flex w-full items-center justify-center gap-x-2 rounded-md border px-2 py-1 text-xs duration-300 hover:bg-blue-100/20 hover:text-primary">
+          <PlusIcon /> {t("Add Animation")}
+        </button>
+        <span className="mt-1 text-center text-[10px] text-gray-400">{t("Click to add reveal animation")}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative rounded-md border">
+      <div
+        onClick={() => setShow(!show)}
+        className={`flex cursor-pointer items-center justify-between p-2 text-xs font-medium hover:bg-blue-50`}>
+        <span>{t("Animation")}</span>
+        <span>
+          <ChevronDownIcon className={"h-4 w-4 text-gray-500 " + (show ? "rotate-180" : "")} />
+        </span>
+      </div>
+      {show && (
+        <>
+          <div className="absolute right-8 top-1 flex items-center justify-between">
+            <button
+              onClick={() => updateAnimation("")}
+              className="flex items-center rounded-full p-1 text-xs text-red-600 duration-200 hover:bg-red-100 hover:text-red-800">
+              <TrashIcon />
+            </button>
+          </div>
+
+          <div className="space-y-2 p-2">
+            <label className="block text-xs">
+              <span className="text-gray-600">{t("Animation")}</span>
+              <select
+                value={localData.type || "fade"}
+                onChange={(e) => {
+                  const newType = e.target.value;
+                  const newDirectionOptions = getDirectionOptions(newType);
+                  const currentDirection = localData.direction || "none";
+                  const isValidDirection = newDirectionOptions.some((opt) => opt.value === currentDirection);
+
+                  handleChange({
+                    type: newType,
+                    direction: isValidDirection ? currentDirection : newDirectionOptions[0].value,
+                  });
+                }}
+                className="mt-1 w-full cursor-pointer rounded border px-2 py-1 text-xs">
+                {ANIMATION_TYPES.map((option) => (
+                  <option key={option.value} value={option.value} className="cursor-pointer">
+                    {t(option.label)}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <label className="block text-xs">
+              <span className="text-gray-600">{t("Easing")}</span>
+              <select
+                value={localData.easing || "ease-out"}
+                onChange={(e) => handleChange({ easing: e.target.value })}
+                className="mt-1 w-full cursor-pointer rounded border px-2 py-1 text-xs">
+                {EASING_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value} className="cursor-pointer">
+                    {t(option.label)}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <label className="block space-y-1 text-xs">
+              <span className="text-gray-600">{t("Direction")}</span>
+              {localData?.type === "flip" ? (
+                <div className="grid grid-cols-2 gap-1">
+                  <button
+                    onClick={() => handleChange({ direction: "y" })}
+                    className={`flex items-center justify-center gap-x-1 rounded border px-3 py-1.5 text-xs transition-colors hover:bg-primary/5 hover:text-primary ${
+                      localData?.direction === "y" ? "border-primary bg-primary/10 text-primary" : "border-gray-300"
+                    }`}>
+                    <HeightIcon className="rotate-90" />
+                    <span>{t("Horizontal")}</span>
+                  </button>
+                  <button
+                    onClick={() => handleChange({ direction: "x" })}
+                    className={`flex items-center justify-center gap-x-1 rounded border px-3 py-1.5 text-xs transition-colors hover:bg-primary/5 hover:text-primary ${
+                      localData?.direction === "x" ? "border-primary bg-primary/10 text-primary" : "border-gray-300"
+                    }`}>
+                    <HeightIcon />
+                    <span>{t("Vertical")}</span>
+                  </button>
+                </div>
+              ) : localData?.type === "rotate" ? (
+                <div className="grid grid-cols-2 gap-1">
+                  {[
+                    { dir: "up-left", label: "Up Left", rotation: "-rotate-45 order-2" },
+                    { dir: "up-right", label: "Up Right", rotation: "rotate-45" },
+                    { dir: "down-left", label: "Down Left", rotation: "rotate-45 scale-x-[-1] order-4" },
+                    { dir: "down-right", label: "Down Right", rotation: "-rotate-45 scale-y-[-1]" },
+                  ].map(({ dir, label, rotation }) => (
+                    <button
+                      key={dir}
+                      onClick={() => handleChange({ direction: dir })}
+                      className={`flex items-center justify-between gap-x-1 rounded border px-2 py-1.5 text-xs transition-colors hover:bg-primary/5 hover:text-primary ${
+                        localData?.direction === dir ? "border-primary bg-primary/10 text-primary" : "border-gray-300"
+                      }`}>
+                      <HeightIcon className={rotation} />
+                      <span>{t(label)}</span>
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <div className="grid grid-cols-3 items-center gap-1">
+                  <button
+                    onClick={() => handleChange({ direction: "right" })}
+                    className={`flex h-12 items-center justify-center rounded border px-2 py-1 text-xs transition-colors hover:bg-primary/5 hover:text-primary ${
+                      localData?.direction === "right" ? "border-primary bg-primary/10 text-primary" : "border-gray-300"
+                    }`}>
+                    <ArrowLeftIcon className="h-4 w-4" />
+                  </button>
+                  <div className="flex flex-col gap-1">
+                    <button
+                      onClick={() => handleChange({ direction: "up" })}
+                      className={`flex items-center justify-center rounded border px-2 py-1 text-xs transition-colors hover:bg-primary/5 hover:text-primary ${
+                        localData?.direction === "up" ? "border-primary bg-primary/10 text-primary" : "border-gray-300"
+                      }`}>
+                      <ArrowUpIcon className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() => handleChange({ direction: "down" })}
+                      className={`flex items-center justify-center rounded border px-2 py-1 text-xs transition-colors hover:bg-primary/5 hover:text-primary ${
+                        localData?.direction === "down"
+                          ? "border-primary bg-primary/10 text-primary"
+                          : "border-gray-300"
+                      }`}>
+                      <ArrowDownIcon className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <button
+                    onClick={() => handleChange({ direction: "left" })}
+                    className={`flex h-12 items-center justify-center rounded border px-2 py-1 text-xs transition-colors hover:bg-primary/5 hover:text-primary ${
+                      localData?.direction === "left" ? "border-primary bg-primary/10 text-primary" : "border-gray-300"
+                    }`}>
+                    <ArrowRightIcon className="h-4 w-4" />
+                  </button>
+                </div>
+              )}
+            </label>
+
+            <div className="grid grid-cols-2 gap-2">
+              <label className="block text-xs">
+                <span className="text-gray-600">{t("Duration (ms)")}</span>
+                <input
+                  type="number"
+                  min={0}
+                  max={3000}
+                  value={localData.duration || 600}
+                  onChange={(e) => handleChange({ duration: parseInt(e.target.value) })}
+                  className="mt-1 w-full rounded border px-2 py-1 text-xs"
+                />
+              </label>
+
+              <label className="block text-xs">
+                <span className="text-gray-600">{t("Delay (ms)")}</span>
+                <input
+                  type="number"
+                  min={0}
+                  max={2000}
+                  value={localData.delay}
+                  onChange={(e) => handleChange({ delay: parseInt(e.target.value) })}
+                  className="mt-1 w-full rounded border px-2 py-1 text-xs"
+                />
+              </label>
+            </div>
+
+            <label className="flex items-center gap-2 text-xs">
+              <input
+                type="checkbox"
+                checked={localData.triggerOnce ?? true}
+                onChange={(e) => handleChange({ triggerOnce: e.target.checked })}
+                className="cursor-pointer"
+              />
+              <span className="cursor-pointer text-gray-600">{t("Play Once")}</span>
+            </label>
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
+
+const AnimationFieldWrapper = () => {
+  const animationEnabled = useBuilderProp("flags.animation", false);
+  return animationEnabled ? <AnimationField /> : null;
+};
+
+export default AnimationFieldWrapper;
diff --git a/src/render/animation/animation-styles.css b/src/render/animation/animation-styles.css
new file mode 100644
index 00000000..5269109a
--- /dev/null
+++ b/src/render/animation/animation-styles.css
@@ -0,0 +1,488 @@
+/**
+ * Reveal Animation Styles
+ * SEO-friendly: Content is always in DOM, only visual properties change
+ * Performance optimized: Uses transform and opacity (GPU accelerated)
+ * No external library dependencies
+ */
+
+/* Base state - hidden but accessible to screen readers and crawlers */
+.chai-reveal {
+  will-change: transform, opacity;
+}
+
+.chai-reveal[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+}
+
+.chai-reveal[data-visible="true"] {
+  opacity: 1;
+}
+
+/* ============================================
+   TRANSITION PROPERTY FOR SMOOTH ANIMATIONS
+   ============================================ */
+
+.chai-reveal[data-animate="true"] {
+  transition-property: opacity, transform;
+  transition-duration: var(--chai-animation-duration, 0.6s);
+  transition-timing-function: var(--chai-animation-easing, ease-out);
+  transition-delay: var(--chai-animation-delay, 0s);
+}
+
+/* ============================================
+   REDUCED MOTION SUPPORT (Accessibility)
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .chai-reveal,
+  .chai-reveal[data-animate="true"],
+  .chai-reveal[data-visible="true"] {
+    transition: none !important;
+    animation: none !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
+}
+
+/* ============================================
+   EASING FUNCTIONS
+   ============================================ */
+
+.chai-reveal--ease-linear {
+  --chai-animation-easing: linear;
+}
+
+.chai-reveal--ease-in {
+  --chai-animation-easing: ease-in;
+}
+
+.chai-reveal--ease-out {
+  --chai-animation-easing: ease-out;
+}
+
+.chai-reveal--ease-in-out {
+  --chai-animation-easing: ease-in-out;
+}
+
+.chai-reveal--ease-in-back {
+  --chai-animation-easing: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+}
+
+.chai-reveal--ease-out-back {
+  --chai-animation-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.chai-reveal--ease-in-out-back {
+  --chai-animation-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* ============================================
+   FADE ANIMATIONS
+   ============================================ */
+
+/* Fade In */
+.chai-reveal--fade-in[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+}
+
+.chai-reveal--fade-in[data-visible="true"] {
+  opacity: 1;
+}
+
+/* Fade In Up */
+.chai-reveal--fade-in-up[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.chai-reveal--fade-in-up[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Fade In Down */
+.chai-reveal--fade-in-down[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.chai-reveal--fade-in-down[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Fade In Left */
+.chai-reveal--fade-in-left[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.chai-reveal--fade-in-left[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Fade In Right */
+.chai-reveal--fade-in-right[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.chai-reveal--fade-in-right[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* ============================================
+   SLIDE ANIMATIONS
+   ============================================ */
+
+/* Slide In Up */
+.chai-reveal--slide-in-up[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.chai-reveal--slide-in-up[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Slide In Down */
+.chai-reveal--slide-in-down[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.chai-reveal--slide-in-down[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Slide In Left */
+.chai-reveal--slide-in-left[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateX(-90%);
+}
+
+.chai-reveal--slide-in-left[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Slide In Right */
+.chai-reveal--slide-in-right[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateX(90%);
+}
+
+.chai-reveal--slide-in-right[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* ============================================
+   ZOOM ANIMATIONS
+   ============================================ */
+
+/* Zoom In */
+.chai-reveal--zoom-in[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.chai-reveal--zoom-in[data-visible="true"] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Zoom In Up */
+.chai-reveal--zoom-in-up[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: scale(0.5) translateY(30px);
+}
+
+.chai-reveal--zoom-in-up[data-visible="true"] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+/* Zoom In Down */
+.chai-reveal--zoom-in-down[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: scale(0.5) translateY(-30px);
+}
+
+.chai-reveal--zoom-in-down[data-visible="true"] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+/* Zoom In Left */
+.chai-reveal--zoom-in-left[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: scale(0.5) translateX(-30px);
+}
+
+.chai-reveal--zoom-in-left[data-visible="true"] {
+  opacity: 1;
+  transform: scale(1) translateX(0);
+}
+
+/* Zoom In Right */
+.chai-reveal--zoom-in-right[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: scale(0.5) translateX(30px);
+}
+
+.chai-reveal--zoom-in-right[data-visible="true"] {
+  opacity: 1;
+  transform: scale(1) translateX(0);
+}
+
+/* ============================================
+   FLIP ANIMATIONS
+   ============================================ */
+
+/* Flip In X */
+.chai-reveal--flip-in-x[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: perspective(400px) rotateX(90deg);
+}
+
+.chai-reveal--flip-in-x[data-visible="true"] {
+  opacity: 1;
+  transform: perspective(400px) rotateX(0);
+}
+
+/* Flip In Y */
+.chai-reveal--flip-in-y[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: perspective(400px) rotateY(90deg);
+}
+
+.chai-reveal--flip-in-y[data-visible="true"] {
+  opacity: 1;
+  transform: perspective(400px) rotateY(0);
+}
+
+/* ============================================
+   ROTATE ANIMATIONS
+   ============================================ */
+
+/* Rotate In */
+.chai-reveal--rotate-in[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: rotate(-180deg) scale(0.5);
+}
+
+.chai-reveal--rotate-in[data-visible="true"] {
+  opacity: 1;
+  transform: rotate(0) scale(1);
+}
+
+/* Rotate In Up Left */
+.chai-reveal--rotate-in-up-left[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: rotate(-45deg);
+  transform-origin: left bottom;
+}
+
+.chai-reveal--rotate-in-up-left[data-visible="true"] {
+  opacity: 1;
+  transform: rotate(0);
+  transform-origin: left bottom;
+}
+
+/* Rotate In Up Right */
+.chai-reveal--rotate-in-up-right[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: rotate(45deg);
+  transform-origin: right bottom;
+}
+
+.chai-reveal--rotate-in-up-right[data-visible="true"] {
+  opacity: 1;
+  transform: rotate(0);
+  transform-origin: right bottom;
+}
+
+/* Rotate In Down Left */
+.chai-reveal--rotate-in-down-left[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: rotate(45deg);
+  transform-origin: left top;
+}
+
+.chai-reveal--rotate-in-down-left[data-visible="true"] {
+  opacity: 1;
+  transform: rotate(0);
+  transform-origin: left top;
+}
+
+/* Rotate In Down Right */
+.chai-reveal--rotate-in-down-right[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: rotate(-45deg);
+  transform-origin: right top;
+}
+
+.chai-reveal--rotate-in-down-right[data-visible="true"] {
+  opacity: 1;
+  transform: rotate(0);
+  transform-origin: right top;
+}
+
+/* ============================================
+   BOUNCE ANIMATIONS
+   ============================================ */
+
+/* Bounce In */
+.chai-reveal--bounce-in[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: scale(0.3);
+}
+
+.chai-reveal--bounce-in[data-visible="true"] {
+  opacity: 1;
+  transform: scale(1);
+  animation: chai-bounce-in var(--chai-animation-duration, 0.6s)
+    var(--chai-animation-easing, cubic-bezier(0.68, -0.55, 0.265, 1.55));
+}
+
+@keyframes chai-bounce-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Bounce In Up */
+.chai-reveal--bounce-in-up[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateY(50px);
+}
+
+.chai-reveal--bounce-in-up[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  animation: chai-bounce-in-up var(--chai-animation-duration, 0.6s)
+    var(--chai-animation-easing, cubic-bezier(0.68, -0.55, 0.265, 1.55));
+}
+
+@keyframes chai-bounce-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  60% {
+    transform: translateY(-10px);
+  }
+  80% {
+    transform: translateY(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Bounce In Down */
+.chai-reveal--bounce-in-down[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+
+.chai-reveal--bounce-in-down[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  animation: chai-bounce-in-down var(--chai-animation-duration, 0.6s)
+    var(--chai-animation-easing, cubic-bezier(0.68, -0.55, 0.265, 1.55));
+}
+
+@keyframes chai-bounce-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  60% {
+    transform: translateY(10px);
+  }
+  80% {
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Bounce In Left */
+.chai-reveal--bounce-in-left[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateX(-50px);
+}
+
+.chai-reveal--bounce-in-left[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(0);
+  animation: chai-bounce-in-left var(--chai-animation-duration, 0.6s)
+    var(--chai-animation-easing, cubic-bezier(0.68, -0.55, 0.265, 1.55));
+}
+
+@keyframes chai-bounce-in-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  60% {
+    transform: translateX(10px);
+  }
+  80% {
+    transform: translateX(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Bounce In Right */
+.chai-reveal--bounce-in-right[data-animate="true"]:not([data-visible="true"]) {
+  opacity: 0;
+  transform: translateX(50px);
+}
+
+.chai-reveal--bounce-in-right[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(0);
+  animation: chai-bounce-in-right var(--chai-animation-duration, 0.6s)
+    var(--chai-animation-easing, cubic-bezier(0.68, -0.55, 0.265, 1.55));
+}
+
+@keyframes chai-bounce-in-right {
+  0% {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  60% {
+    transform: translateX(-10px);
+  }
+  80% {
+    transform: translateX(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/src/render/animation/animation-utils.ts b/src/render/animation/animation-utils.ts
new file mode 100644
index 00000000..526b0bfd
--- /dev/null
+++ b/src/render/animation/animation-utils.ts
@@ -0,0 +1,141 @@
+import { isEmpty, join, split, toNumber } from "lodash-es";
+
+export type TAnimation = {
+  type: string;
+  direction: string;
+  duration: number;
+  delay: number;
+  easing: string;
+  triggerOnce: boolean;
+};
+
+export const ANIMATION_TYPES = [
+  { value: "fade", label: "Fade" },
+  { value: "slide", label: "Slide" },
+  { value: "zoom", label: "Zoom" },
+  { value: "flip", label: "Flip" },
+  { value: "rotate", label: "Rotate" },
+  { value: "bounce", label: "Bounce" },
+];
+
+export const EASING_OPTIONS = [
+  { value: "ease-linear", label: "Linear" },
+  { value: "ease-in", label: "Ease In" },
+  { value: "ease-out", label: "Ease Out" },
+  { value: "ease-in-out", label: "Ease In Out" },
+  { value: "ease-in-back", label: "Ease In Back" },
+  { value: "ease-out-back", label: "Ease Out Back" },
+  { value: "ease-in-out-back", label: "Ease In Out Back" },
+];
+
+export const getDirectionOptions = (type: string) => {
+  switch (type) {
+    case "slide":
+      return [
+        { value: "up", label: "Up" },
+        { value: "down", label: "Down" },
+        { value: "left", label: "Left" },
+        { value: "right", label: "Right" },
+      ];
+    case "fade":
+    case "zoom":
+    case "bounce":
+      return [
+        { value: "none", label: "Default" },
+        { value: "up", label: "Up" },
+        { value: "down", label: "Down" },
+        { value: "left", label: "Left" },
+        { value: "right", label: "Right" },
+      ];
+    case "flip":
+      return [
+        { value: "x", label: "Horizontal (X)" },
+        { value: "y", label: "Vertical (Y)" },
+      ];
+    case "rotate":
+      return [
+        { value: "none", label: "Default" },
+        { value: "up-left", label: "Up Left" },
+        { value: "up-right", label: "Up Right" },
+        { value: "down-left", label: "Down Left" },
+        { value: "down-right", label: "Down Right" },
+      ];
+    default:
+      return [{ value: "none", label: "Default" }];
+  }
+};
+
+export const DEFAULT_ANIMATION = {
+  delay: 10,
+  duration: 500,
+  triggerOnce: true,
+  type: "fade",
+  direction: "up",
+  easing: "ease-linear",
+};
+
+export const convertToAnimationString = (animation: TAnimation): string => {
+  if (isEmpty(animation)) return "";
+  const { type, direction, easing, duration, delay, triggerOnce } = animation;
+  return join([type, direction, easing, duration, delay, triggerOnce ? "1" : "0"], "|");
+};
+
+export const convertToAnimationObject = (animationString: string): TAnimation => {
+  const [type, direction, easing, duration, delay, triggerOnce] = split(animationString, "|");
+  return {
+    type,
+    easing,
+    direction,
+    delay: toNumber(delay),
+    duration: toNumber(duration),
+    triggerOnce: triggerOnce === "1",
+  };
+};
+
+export const getAnimationClassName = (type: string, direction: string): string => {
+  if (!type) return "";
+
+  // Map type to CSS class base name (CSS uses "fade-in", "slide-in", "zoom-in", etc.)
+  const typeMap: Record<string, string> = {
+    fade: "fade-in",
+    slide: "slide-in",
+    zoom: "zoom-in",
+    flip: "flip-in",
+    rotate: "rotate-in",
+    bounce: "bounce-in",
+  };
+
+  const baseType = typeMap[type] || type;
+
+  if (!direction || direction === "none") {
+    return `chai-reveal--${baseType}`;
+  }
+  return `chai-reveal--${baseType}-${direction}`;
+};
+
+export const applyAnimationStyles = (element: Element, animation: TAnimation): void => {
+  const { type, direction, easing, duration, delay } = animation;
+
+  element.classList.add("chai-reveal");
+
+  const animationClass = getAnimationClassName(type, direction);
+  if (animationClass) {
+    element.classList.add(animationClass);
+  }
+
+  if (easing) {
+    element.classList.add(`chai-reveal--${easing}`);
+  }
+
+  const el = element as HTMLElement;
+  if (duration) {
+    // Duration is stored in ms, convert to seconds for CSS
+    el.style.setProperty("--chai-animation-duration", `${duration / 1000}s`);
+  }
+  if (delay) {
+    // Delay is stored in ms, convert to seconds for CSS
+    el.style.setProperty("--chai-animation-delay", `${delay / 1000}s`);
+  }
+
+  el.setAttribute("data-animate", "true");
+};
diff --git a/src/render/animation/use-chai-animation.ts b/src/render/animation/use-chai-animation.ts
new file mode 100644
index 00000000..84e42428
--- /dev/null
+++ b/src/render/animation/use-chai-animation.ts
@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+import { applyAnimationStyles, convertToAnimationObject } from "./animation-utils";
+
+const ATTR = "data-animation";
+
+export const useChaiAnimation = () => {
+  useEffect(() => {
+    const observers: IntersectionObserver[] = [];
+    const initializedElements = new WeakSet<Element>();
+
+    const initializeAnimations = () => {
+      const nodes = document.querySelectorAll(`[${ATTR}]`);
+
+      nodes.forEach((node) => {
+        if (initializedElements.has(node)) return;
+
+        const animationString = node.getAttribute(ATTR);
+        if (!animationString) return;
+
+        initializedElements.add(node);
+        const animation = convertToAnimationObject(animationString);
+        applyAnimationStyles(node, animation);
+
+        // Small delay to ensure hidden state is painted before observing
+        setTimeout(() => {
+          const observer = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                  entry.target.setAttribute("data-visible", "true");
+                  if (animation.triggerOnce) {
+                    observer.unobserve(entry.target);
+                  }
+                } else if (!animation.triggerOnce) {
+                  entry.target.setAttribute("data-visible", "false");
+                }
+              });
+            },
+            {
+              threshold: 0.1,
+              rootMargin: "0px 0px -50px 0px",
+            },
+          );
+
+          observer.observe(node as Element);
+          observers.push(observer);
+        }, 50);
+      });
+    };
+
+    // Small delay to ensure DOM is ready after React render
+    const timeoutId = requestAnimationFrame(() => {
+      initializeAnimations();
+    });
+
+    // Watch for new elements with data-animation attribute
+    const mutationObserver = new MutationObserver((mutations) => {
+      let hasNewAnimationElements = false;
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof Element) {
+            if (node.hasAttribute(ATTR) || node.querySelector(`[${ATTR}]`)) {
+              hasNewAnimationElements = true;
+            }
+          }
+        });
+      });
+      if (hasNewAnimationElements) initializeAnimations();
+    });
+
+    mutationObserver.observe(document.body, { childList: true, subtree: true });
+
+    return () => {
+      cancelAnimationFrame(timeoutId);
+      observers.forEach((observer) => observer.disconnect());
+      mutationObserver.disconnect();
+    };
+  }, []);
+};
diff --git a/src/render/render-chai-blocks.tsx b/src/render/render-chai-blocks.tsx
index 5396bb17..ca88223c 100644
--- a/src/render/render-chai-blocks.tsx
+++ b/src/render/render-chai-blocks.tsx
@@ -1,3 +1,4 @@
+import AnimationContainer from "@/render/animation/animation-container";
 import { ChaiBlock } from "@/types/chai-block";
 import { ChaiPageProps } from "@chaibuilder/runtime";
 import { cloneDeep, find, forEach, get, isEmpty, isObject, isString, keys } from "lodash-es";
@@ -65,5 +66,9 @@ export function RenderChaiBlocks(props: RenderChaiBlocksProps) {
 
   const lang = props.lang ?? "en";
   const fallbackLang = props.fallbackLang ?? lang;
-  return <RenderBlocks {...props} lang={lang} fallbackLang={fallbackLang} />;
+  return (
+    <AnimationContainer>
+      <RenderBlocks {...props} lang={lang} fallbackLang={fallbackLang} />
+    </AnimationContainer>
+  );
 }
diff --git a/src/types/chaibuilder-editor-props.ts b/src/types/chaibuilder-editor-props.ts
index 2216666c..9b9bbb4e 100644
--- a/src/types/chaibuilder-editor-props.ts
+++ b/src/types/chaibuilder-editor-props.ts
@@ -302,6 +302,7 @@ export interface ChaiBuilderEditorProps {
     dragAndDrop?: boolean;
     validateStructure?: boolean;
     designTokens?: boolean;
+    animation?: boolean;
   };
 
   structureRules?: StructureRule[];