imbhargav5 · imbhargav5 · Dec 13, 2025 · Dec 13, 2025 · Dec 13, 2025
diff --git a/.changeset/legal-bats-own.md b/.changeset/legal-bats-own.md
@@ -0,0 +1,5 @@
+---
+"rooks": minor
+---
+
+add useEasing hook
diff --git a/README.md b/README.md
@@ -225,11 +225,12 @@ function App() {
 <!--hookslist start-->
 
 <details>
-<summary><h3>🎬 Animation & Timing - 9 hooks</h3></summary>
+<summary><h3>🎬 Animation & Timing - 10 hooks</h3></summary>
 
 
 
 * [useAnimation](https://rooks.vercel.app/docs/hooks/useAnimation) - Animation hook for React
+* [useEasing](https://rooks.vercel.app/docs/hooks/useEasing) - A hook for creating controlled easing animations with start/stop/reset capabilities.
 * [useIntervalWhen](https://rooks.vercel.app/docs/hooks/useIntervalWhen) - Sets an interval immediately when a condition is true
 * [useLockBodyScroll](https://rooks.vercel.app/docs/hooks/useLockBodyScroll) - This hook locks the scroll of the body element when `isLocked` is set to `true`.
 * [usePrefersReducedMotion](https://rooks.vercel.app/docs/hooks/usePrefersReducedMotion) - A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system.
@@ -521,7 +522,7 @@ function App() {
 
 <!--hookscount start-->
 
-✅ Collection of 119 hooks as standalone modules.
+✅ Collection of 120 hooks as standalone modules.
 
 <!--hookscount end-->
 

diff --git a/apps/website/content/docs/hooks/(animation)/useAnimation.mdx b/apps/website/content/docs/hooks/(animation)/useAnimation.mdx
@@ -5,6 +5,10 @@ description: "A hook that creates an animation with duration, easing, delay, and
 
 # useAnimation
 
+<Callout type="warn">
+**Deprecated:** This hook is deprecated and will be removed in a future major version. Please migrate to [useEasing](/docs/hooks/useEasing) for better control and features.
+</Callout>
+
 `useAnimation` is a hook that creates an animation with duration, easing, delay, and loop options.
 
 ## Usage

diff --git a/apps/website/content/docs/hooks/(animation)/useEasing.mdx b/apps/website/content/docs/hooks/(animation)/useEasing.mdx
@@ -0,0 +1,156 @@
+---
+title: "useEasing"
+description: "A hook for creating controlled easing animations with start/stop/reset capabilities."
+---
+
+# useEasing
+
+`useEasing` is a hook for creating controlled easing animations with start/stop/reset capabilities. It returns a progress value (0 to 1) along with controls for managing the animation state.
+
+## Usage
+
+### Basic Usage
+
+```jsx
+import { useEasing } from "rooks";
+
+function App() {
+  const [progress] = useEasing(1000);
+
+  return (
+    <div style={{ opacity: progress }}>
+      Fading In...
+    </div>
+  );
+}
+```
+
+### With Controls
+
+```jsx
+import { useEasing, Easing } from "rooks";
+
+function App() {
+  const [progress, { start, stop, reset, state }] = useEasing(1000, {
+    easing: Easing.easeInOutQuad,
+    autoStart: false,
+  });
+
+  return (
+    <div>
+      <div style={{
+        width: 100,
+        height: 100,
+        background: 'blue',
+        transform: `translateX(${progress * 200}px)`
+      }} />
+      <button onClick={start} disabled={state === "running"}>Start</button>
+      <button onClick={stop} disabled={state === "idle"}>Stop</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+```
+
+### Looping Animation
+
+```jsx
+import { useEasing, Easing } from "rooks";
+
+function App() {
+  const [progress] = useEasing(1000, {
+    loop: true,
+    alternate: true,
+    easing: Easing.easeInOutQuad,
+  });
+
+  return (
+    <div style={{
+      width: 50,
+      height: 50,
+      background: 'red',
+      opacity: 0.3 + progress * 0.7
+    }} />
+  );
+}
+```
+
+### Tracking Iterations
+
+```jsx
+import { useEasing } from "rooks";
+
+function App() {
+  const [progress, { endCount, restart }] = useEasing(2000, {
+    onEnd: () => console.log('Animation ended'),
+  });
+
+  return (
+    <div>
+      <div>Progress: {(progress * 100).toFixed(0)}%</div>
+      <div>Completed: {endCount} times</div>
+      <button onClick={restart}>Restart</button>
+    </div>
+  );
+}
+```
+
+## Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| duration | number | - | Duration of the animation in milliseconds. |
+| options | UseEasingOptions | {} | Configuration options. |
+
+### UseEasingOptions
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| easing | (t: number) => number | Easing.linear | Easing function to use. |
+| autoStart | boolean | true | Whether to start animation on mount. |
+| loop | boolean | false | Whether to loop the animation. |
+| alternate | boolean | false | Whether to alternate direction on each loop (ping-pong). |
+| delay | number | 0 | Delay before starting animation in milliseconds. |
+| onEnd | () => void | undefined | Callback fired each time animation reaches the end. |
+
+## Return Value
+
+Returns a tuple `[progress, controls]`:
+
+### progress
+
+A number between 0 and 1 representing the current eased progress of the animation.
+
+### controls
+
+| Property | Type | Description |
+| --- | --- | --- |
+| start | () => void | Start or resume the animation. |
+| stop | () => void | Stop/pause the animation at current position. |
+| reset | () => void | Reset to initial state (progress=0, direction=forward, endCount=0). |
+| restart | () => void | Reset and start (convenience method). |
+| state | "idle" \| "running" | Current animation state. |
+| direction | "forward" \| "backward" | Current animation direction. |
+| endCount | number | Number of times animation has reached the end. |
+
+## Easing Presets
+
+The `Easing` object provides common easing functions:
+
+| Function | Description |
+| --- | --- |
+| Easing.linear | Linear interpolation (no easing). |
+| Easing.easeInQuad | Quadratic ease-in (accelerating). |
+| Easing.easeOutQuad | Quadratic ease-out (decelerating). |
+| Easing.easeInOutQuad | Quadratic ease-in-out. |
+| Easing.easeInCubic | Cubic ease-in. |
+| Easing.easeOutCubic | Cubic ease-out. |
+| Easing.easeInOutCubic | Cubic ease-in-out. |
+
+You can also provide your own easing function:
+
+```jsx
+const customEasing = (t) => 1 - Math.pow(1 - t, 3);
+
+const [progress] = useEasing(1000, { easing: customEasing });
+```
diff --git a/apps/website/src/pages/list-of-hooks.md b/apps/website/src/pages/list-of-hooks.md
@@ -7,11 +7,12 @@ sidebar_label: Hooks List
 <!--hookslist start-->
 
 <details>
-<summary><h3>🎬 Animation & Timing - 9 hooks</h3></summary>
+<summary><h3>🎬 Animation & Timing - 10 hooks</h3></summary>
 
 
 
 * [useAnimation](https://rooks.vercel.app/docs/hooks/useAnimation) - Animation hook for React
+* [useEasing](https://rooks.vercel.app/docs/hooks/useEasing) - A hook for creating controlled easing animations with start/stop/reset capabilities.
 * [useIntervalWhen](https://rooks.vercel.app/docs/hooks/useIntervalWhen) - Sets an interval immediately when a condition is true
 * [useLockBodyScroll](https://rooks.vercel.app/docs/hooks/useLockBodyScroll) - This hook locks the scroll of the body element when `isLocked` is set to `true`.
 * [usePrefersReducedMotion](https://rooks.vercel.app/docs/hooks/usePrefersReducedMotion) - A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system.

diff --git a/data/docs/useEasing.md b/data/docs/useEasing.md
@@ -0,0 +1,55 @@
+---
+id: useEasing
+title: useEasing
+sidebar_label: useEasing
+---
+
+## About
+
+A hook for creating controlled easing animations with start/stop/reset capabilities.
+<br/>
+
+## Examples
+
+```jsx
+import React from "react";
+import { useEasing, Easing } from "rooks";
+
+export default function App() {
+  const [progress, { start, stop, reset, state }] = useEasing(1000, {
+    easing: Easing.easeInOutQuad,
+    autoStart: false,
+  });
+
+  return (
+    <>
+      <div style={{
+        width: 100,
+        height: 100,
+        background: 'blue',
+        transform: `translateX(${progress * 200}px)`
+      }} />
+      <hr />
+      <button onClick={start} disabled={state === "running"}>Start</button>
+      <button onClick={stop} disabled={state === "idle"}>Stop</button>
+      <button onClick={reset}>Reset</button>
+    </>
+  );
+}
+```
+
+### Arguments
+
+| Argument | Type             | Description                               |
+| -------- | ---------------- | ----------------------------------------- |
+| duration | number           | Duration of the animation in milliseconds |
+| options  | UseEasingOptions | Configuration options                     |
+
+### Return
+
+| Return value | Type                  | Description                                                       |
+| ------------ | --------------------- | ----------------------------------------------------------------- |
+| progress     | number                | Current eased progress value (0 to 1)                             |
+| controls     | EasingControls        | Object containing \{start, stop, reset, restart, state, direction, endCount\} |
+
+---
diff --git a/data/hooks-list.json b/data/hooks-list.json
@@ -115,6 +115,11 @@
       "description": "Returns the visibility state of the document.",
       "category": "events"
     },
+    {
+      "name": "useEasing",
+      "description": "A hook for creating controlled easing animations with start/stop/reset capabilities.",
+      "category": "animation"
+    },
     {
       "name": "useEffectOnceWhen",
       "description": "Runs a callback effect atmost one time when a condition becomes true",

diff --git a/packages/rooks/README.md b/packages/rooks/README.md
@@ -225,11 +225,12 @@ function App() {
 <!--hookslist start-->
 
 <details>
-<summary><h3>🎬 Animation & Timing - 9 hooks</h3></summary>
+<summary><h3>🎬 Animation & Timing - 10 hooks</h3></summary>
 
 
 
 * [useAnimation](https://rooks.vercel.app/docs/hooks/useAnimation) - Animation hook for React
+* [useEasing](https://rooks.vercel.app/docs/hooks/useEasing) - A hook for creating controlled easing animations with start/stop/reset capabilities.
 * [useIntervalWhen](https://rooks.vercel.app/docs/hooks/useIntervalWhen) - Sets an interval immediately when a condition is true
 * [useLockBodyScroll](https://rooks.vercel.app/docs/hooks/useLockBodyScroll) - This hook locks the scroll of the body element when `isLocked` is set to `true`.
 * [usePrefersReducedMotion](https://rooks.vercel.app/docs/hooks/usePrefersReducedMotion) - A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system.
@@ -521,7 +522,7 @@ function App() {
 
 <!--hookscount start-->
 
-✅ Collection of 119 hooks as standalone modules.
+✅ Collection of 120 hooks as standalone modules.
 
 <!--hookscount end-->