diff --git a/client/src/features/editor/hooks/useBlockAnimtaion.ts b/client/src/features/editor/hooks/useBlockAnimtaion.ts
new file mode 100644
index 00000000..b89ea8e5
--- /dev/null
+++ b/client/src/features/editor/hooks/useBlockAnimtaion.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+export const useBlockAnimation = (blockRef: React.RefObject<HTMLDivElement>) => {
+  const [isAnimationStart, setIsAnimationStart] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsAnimationStart(true);
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+      },
+    );
+
+    if (blockRef.current) {
+      observer.observe(blockRef.current);
+    }
+
+    return () => {
+      if (blockRef.current) {
+        observer.unobserve(blockRef.current);
+      }
+    };
+  }, []);
+
+  return { isAnimationStart };
+};