{"id":14961320,"url":"https://github.com/tanvesh01/motion-hooks","last_synced_at":"2025-10-24T20:31:36.473Z","repository":{"id":37695407,"uuid":"409599470","full_name":"tanvesh01/motion-hooks","owner":"tanvesh01","description":"A simple Hooks wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.","archived":false,"fork":false,"pushed_at":"2022-08-29T19:59:26.000Z","size":1442,"stargazers_count":102,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T04:16:30.680Z","etag":null,"topics":["animation","esm","hooks","motion","react","rollup"],"latest_commit_sha":null,"homepage":"https://motion-hooks.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tanvesh01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-23T13:16:59.000Z","updated_at":"2024-10-05T07:34:25.000Z","dependencies_parsed_at":"2022-07-10T18:00:36.238Z","dependency_job_id":null,"html_url":"https://github.com/tanvesh01/motion-hooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvesh01%2Fmotion-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvesh01%2Fmotion-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvesh01%2Fmotion-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvesh01%2Fmotion-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tanvesh01","download_url":"https://codeload.github.com/tanvesh01/motion-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238035385,"owners_count":19405682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","esm","hooks","motion","react","rollup"],"created_at":"2024-09-24T13:24:47.033Z","updated_at":"2025-10-24T20:31:30.351Z","avatar_url":"https://github.com/tanvesh01.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# motion-hooks\n\nA React Hooks wrapper over [Motion One](https://motion.dev/), An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.\n\n[![npm version](https://badge.fury.io/js/motion-hooks.svg)](https://www.npmjs.com/package/motion-hooks) ![npm](https://img.shields.io/npm/dt/motion-hooks) [![Twitter Follow](https://img.shields.io/twitter/follow/Sarve___tanvesh?label=Chat)](https://twitter.com/Sarve___tanvesh)\n\n## Installation\n\n```\nnpm install motion-hooks motion\n```\n\n\u003e Your project needs to have react@16.8.0 react-dom@16.8.0 or greater\n\n## Hooks\n\nAs of now, motion-hooks has 2 hooks that wrap around `animate` and `timeline` of motion one respectively\n\n-   [`useMotionAnimate`](https://github.com/tanvesh01/motion-hooks#usemotionanimate)\n-   [`useMotionTimeline`](https://github.com/tanvesh01/motion-hooks#usemotiontimeline)\n\n## Example usage\n\n**Things You could do with [`useMotionAnimate`](https://github.com/tanvesh01/motion-hooks#usemotionanimate)**\n\nAnimating List - [Link to codesandbox](https://codesandbox.io/s/divine-mountain-qelct?file=/src/App.js)\n\n![useMotionAnimate List Example](https://media1.giphy.com/media/JNMxjkEipIurs5RaQb/giphy.gif)\n\nAnimating Counter - [Link to codesandbox](https://codesandbox.io/s/nice-browser-d4ds3?file=/src/App.js)\n\n![useMotionAnimate Counter Example](https://media3.giphy.com/media/80wDwOyRlnS1woHcF0/giphy.gif)\n\n**Things You could do with [`useMotionTimeline`](https://github.com/tanvesh01/motion-hooks#usemotiontimeline)**\n\nAnimating elements independently - [Link to codesandbox](https://codesandbox.io/s/dazzling-dawn-f48sm?file=/src/App.js)\n\n![useMotionTimeline Example Usage](https://media1.giphy.com/media/RxCRUxJgi4nuM7b7yv/giphy.gif)\n\n### `useMotionAnimate`\n\nReturns all the properties returned by [`animate`](https://motion.dev/dom/animate) and some helper functions and state\n\n\u003e Props returned my [`animate`](https://motion.dev/dom/animate) are `null` initially\n\nYou may view this example [here on codesandbox](https://codesandbox.io/s/divine-mountain-qelct?file=/src/App.js).\n\n```jsx\nfunction App() {\n    const { play, isFinished, replay } = useMotionAnimate(\n        '.listItem',\n        { y: -20, opacity: 1 },\n        {\n            delay: stagger(0.3),\n            duration: 0.5,\n            easing: [0.22, 0.03, 0.26, 1],\n        },\n    );\n\n    // Play the animation on mount of the component\n    useEffect(() =\u003e {\n        play();\n    }, []);\n\n    return (\n        // Replay the animation anytime by calling a function, anywhere\n        \u003cdiv className=\"App\"\u003e\n            \u003cbutton disabled={!isFinished} onClick={() =\u003e replay()}\u003e\n                Replay\n            \u003c/button\u003e\n\n            \u003cul className=\"list\"\u003e\n                \u003cli className=\"listItem\"\u003eItem 1\u003c/li\u003e\n                \u003cli className=\"listItem\"\u003eItem 2\u003c/li\u003e\n                \u003cli className=\"listItem\"\u003eItem 3\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\nInstead of passing strings to select elements, you can also pass a `ref` :point_down:\n\n```jsx\nconst boxRef = useRef(null);\nconst { play, isFinished, replay } = useMotionAnimate(\n    boxRef,\n    { y: -20, scale: 1.2 },\n    { duration: 1 },\n);\n\nreturn \u003cdiv ref={boxRef}\u003eBOX\u003c/div\u003e;\n```\n\n**API**\n\n```js\nconst { play, replay, reset, isFinished, animateInstance } = useMotionAnimate(\n    selector,\n    keyframes,\n    options,\n    events,\n);\n```\n\n`useMotionAnimate` returns:\n\n-   `play`: plays the animation\n-   `replay`: Resets and plays the animation\n-   `reset`: resets the element to its original styling\n-   `isFinished`: is `true` when animation has finished playing\n-   `animateInstance`: Animation Controls. Refer to [motion one docs](https://motion.dev/dom/controls) for more.\n\n`useMotionAnimate` accepts:\n\n-   `selector` - The target element, can be string or a ref\n-   `keyframes` - Element will animate from its current style to those defined in the keyframe. Refer to [motion's docs](https://motion.dev/dom/animate#keyframes) for more.\n-   `options` - Optional parameter. Refer to [motion doc's](https://motion.dev/dom/animate#options) for the values you could pass to this.\n-   `events` - Pass functions of whatever you want to happen when a event like `onFinish` happens.\n\n    **`events` usage example**\n\n    ```jsx\n    const { play, isFinished, replay } = useMotionAnimate(\n        '.listItem',\n        { y: -20, opacity: 1 },\n        {\n            delay: stagger(0.3),\n            duration: 0.5,\n        },\n        {\n            onFinish: () =\u003e {\n                // Whatever you want to do when animation finishes\n            },\n        },\n    );\n    ```\n\n### `useMotionTimeline`\n\nCreate complex sequences of animations across multiple elements.\n\nreturns `timelineInstance` (Animation Controls) that are returned by [`timeline`](https://motion.dev/dom/timeline) and some helper functions and state\n\n\u003e Props returned my [`timeline`](https://motion.dev/dom/timeline) are `null` initially\n\nYou may view this example [here on codesandbox](https://codesandbox.io/s/dazzling-dawn-f48sm?file=/src/App.js).\n\n```jsx\nfunction App() {\n    const gifRef = useRef(null);\n    const { play, isFinished, replay } = useMotionTimeline(\n        [\n            // You can use Refs too!\n            [gifRef, { scale: [0, 1.2], opacity: 1 }],\n            ['.heading', { y: [50, 0], opacity: [0, 1] }],\n            ['.container p', { opacity: 1 }],\n        ],\n        { duration: 2 },\n    );\n\n    useEffect(() =\u003e {\n        play();\n    }, []);\n\n    return (\n        \u003cdiv className=\"App\"\u003e\n            \u003cbutton disabled={!isFinished} onClick={() =\u003e replay()}\u003e\n                Replay\n            \u003c/button\u003e\n\n            \u003cdiv className=\"container\"\u003e\n                \u003cimg\n                    ref={gifRef}\n                    className=\"gif\"\n                    src={Image}\n                    alt=\"mind explosion gif\"\n                /\u003e\n                \u003cdiv\u003e\n                    \u003ch1 className=\"heading\"\u003eTanvesh\u003c/h1\u003e\n                    \u003cp\u003e@sarve__tanvesh\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n**API**\n\n```js\nconst { play, replay, reset, isFinished, timelineInstance } = useMotionTimeline(\n    sequence,\n    options,\n    events,\n);\n```\n\n`useMotionTimeline` returns:\n\n-   `play`: plays the animation\n-   `replay`: Resets and plays the animation\n-   `reset`: resets the element to its original styling\n-   `isFinished`: is `true` when animation has finished playing\n-   `timelineInstance`: Animation Controls. Refer to [motion one docs](https://motion.dev/dom/controls) for more.\n\n`useMotionTimeline` accepts:\n\n-   `sequence` - `sequence` is an array, defines animations with the same settings as the animate function. In the arrays, Element can be either a string or a ref. You can refer to [sequence docs](https://motion.dev/dom/timeline#sequence) for more on this.\n-   `options` - Optional parameter. Refer to [motion doc's](https://motion.dev/dom/animate#options) for the values you could pass to this.\n-   `events` - Pass functions of whatever you want to happen when a event like `onFinish` happens. Exactly same as useMotionAnimate's `onFinish`.\n\n---\n\n## Local Installation \u0026 Contributing\n\n-   Fork [motion-hooks](https://github.com/tanvesh01/motion-hooks)\n\n```sh\ngit clone https://github.com/:github-username/motion-hooks.git\ncd motion-hooks\nnpm install # Installs dependencies for motion-hooks\ncd examples # React app to test out changes\nnpm install # Installs dependencies for example app\nnpm run dev # To run example on localhost:3000\n```\n\nThe contributing guidelines along with local setup guide is mentioned in [CONTRIBUTING.md](https://github.com/tanvesh01/motion-hooks/blob/main/CONTRIBUTING.md)\n\nAny Type of feedback is more than welcome! This project is in very early stage and would love to have contributors of any skill/exp level.\n\nYou can contact me on my [Twitter handle @Sarve\\_\\_\\_tanvesh](https://twitter.com/Sarve___tanvesh)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanvesh01%2Fmotion-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanvesh01%2Fmotion-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanvesh01%2Fmotion-hooks/lists"}