https://github.com/tanvesh01/motion-hooks
A simple Hooks wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
https://github.com/tanvesh01/motion-hooks
animation esm hooks motion react rollup
Last synced: 8 months ago
JSON representation
A simple Hooks wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
- Host: GitHub
- URL: https://github.com/tanvesh01/motion-hooks
- Owner: tanvesh01
- License: mit
- Created: 2021-09-23T13:16:59.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-29T19:59:26.000Z (about 3 years ago)
- Last Synced: 2025-01-31T04:16:30.680Z (8 months ago)
- Topics: animation, esm, hooks, motion, react, rollup
- Language: TypeScript
- Homepage: https://motion-hooks.netlify.app/
- Size: 1.38 MB
- Stars: 102
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# motion-hooks
A 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.
[](https://www.npmjs.com/package/motion-hooks)  [](https://twitter.com/Sarve___tanvesh)
## Installation
```
npm install motion-hooks motion
```
> Your project needs to have react@16.8.0 react-dom@16.8.0 or greater
## Hooks
As of now, motion-hooks has 2 hooks that wrap around `animate` and `timeline` of motion one respectively
- [`useMotionAnimate`](https://github.com/tanvesh01/motion-hooks#usemotionanimate)
- [`useMotionTimeline`](https://github.com/tanvesh01/motion-hooks#usemotiontimeline)
## Example usage
**Things You could do with [`useMotionAnimate`](https://github.com/tanvesh01/motion-hooks#usemotionanimate)**
Animating List - [Link to codesandbox](https://codesandbox.io/s/divine-mountain-qelct?file=/src/App.js)
Animating Counter - [Link to codesandbox](https://codesandbox.io/s/nice-browser-d4ds3?file=/src/App.js)
**Things You could do with [`useMotionTimeline`](https://github.com/tanvesh01/motion-hooks#usemotiontimeline)**
Animating elements independently - [Link to codesandbox](https://codesandbox.io/s/dazzling-dawn-f48sm?file=/src/App.js)
### `useMotionAnimate`
Returns all the properties returned by [`animate`](https://motion.dev/dom/animate) and some helper functions and state
> Props returned my [`animate`](https://motion.dev/dom/animate) are `null` initially
You may view this example [here on codesandbox](https://codesandbox.io/s/divine-mountain-qelct?file=/src/App.js).
```jsx
function App() {
const { play, isFinished, replay } = useMotionAnimate(
'.listItem',
{ y: -20, opacity: 1 },
{
delay: stagger(0.3),
duration: 0.5,
easing: [0.22, 0.03, 0.26, 1],
},
);
// Play the animation on mount of the component
useEffect(() => {
play();
}, []);
return (
// Replay the animation anytime by calling a function, anywhere
replay()}>
Replay
- Item 1
- Item 2
- Item 3
);
}
```
Instead of passing strings to select elements, you can also pass a `ref` :point_down:
```jsx
const boxRef = useRef(null);
const { play, isFinished, replay } = useMotionAnimate(
boxRef,
{ y: -20, scale: 1.2 },
{ duration: 1 },
);
return
BOX;
```
**API**
```js
const { play, replay, reset, isFinished, animateInstance } = useMotionAnimate(
selector,
keyframes,
options,
events,
);
```
`useMotionAnimate` returns:
- `play`: plays the animation
- `replay`: Resets and plays the animation
- `reset`: resets the element to its original styling
- `isFinished`: is `true` when animation has finished playing
- `animateInstance`: Animation Controls. Refer to [motion one docs](https://motion.dev/dom/controls) for more.
`useMotionAnimate` accepts:
- `selector` - The target element, can be string or a ref
- `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.
- `options` - Optional parameter. Refer to [motion doc's](https://motion.dev/dom/animate#options) for the values you could pass to this.
- `events` - Pass functions of whatever you want to happen when a event like `onFinish` happens.
**`events` usage example**
```jsx
const { play, isFinished, replay } = useMotionAnimate(
'.listItem',
{ y: -20, opacity: 1 },
{
delay: stagger(0.3),
duration: 0.5,
},
{
onFinish: () => {
// Whatever you want to do when animation finishes
},
},
);
```
### `useMotionTimeline`
Create complex sequences of animations across multiple elements.
returns `timelineInstance` (Animation Controls) that are returned by [`timeline`](https://motion.dev/dom/timeline) and some helper functions and state
> Props returned my [`timeline`](https://motion.dev/dom/timeline) are `null` initially
You may view this example [here on codesandbox](https://codesandbox.io/s/dazzling-dawn-f48sm?file=/src/App.js).
```jsx
function App() {
const gifRef = useRef(null);
const { play, isFinished, replay } = useMotionTimeline(
[
// You can use Refs too!
[gifRef, { scale: [0, 1.2], opacity: 1 }],
['.heading', { y: [50, 0], opacity: [0, 1] }],
['.container p', { opacity: 1 }],
],
{ duration: 2 },
);
useEffect(() => {
play();
}, []);
return (
replay()}>
Replay
Tanvesh
@sarve__tanvesh
);
}
```
**API**
```js
const { play, replay, reset, isFinished, timelineInstance } = useMotionTimeline(
sequence,
options,
events,
);
```
`useMotionTimeline` returns:
- `play`: plays the animation
- `replay`: Resets and plays the animation
- `reset`: resets the element to its original styling
- `isFinished`: is `true` when animation has finished playing
- `timelineInstance`: Animation Controls. Refer to [motion one docs](https://motion.dev/dom/controls) for more.
`useMotionTimeline` accepts:
- `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.
- `options` - Optional parameter. Refer to [motion doc's](https://motion.dev/dom/animate#options) for the values you could pass to this.
- `events` - Pass functions of whatever you want to happen when a event like `onFinish` happens. Exactly same as useMotionAnimate's `onFinish`.
---
## Local Installation & Contributing
- Fork [motion-hooks](https://github.com/tanvesh01/motion-hooks)
```sh
git clone https://github.com/:github-username/motion-hooks.git
cd motion-hooks
npm install # Installs dependencies for motion-hooks
cd examples # React app to test out changes
npm install # Installs dependencies for example app
npm run dev # To run example on localhost:3000
```
The contributing guidelines along with local setup guide is mentioned in [CONTRIBUTING.md](https://github.com/tanvesh01/motion-hooks/blob/main/CONTRIBUTING.md)
Any 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.
You can contact me on my [Twitter handle @Sarve\_\_\_tanvesh](https://twitter.com/Sarve___tanvesh)