A React Hooks wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
npm install motion-hooks
Your project needs to have react@16.8.0 react-dom@16.8.0 or greater
Returns all the properties returned by animate
and some helper functions and state
Props returned my
animate
arenull
initially
You may view this example here on codesandbox.
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
<div className="App">
<button disabled={!isFinished} onClick={() => replay()}>
Replay
</button>
<ul className="list">
<li className="listItem">Item 1</li>
<li className="listItem">Item 2</li>
<li className="listItem">Item 3</li>
</ul>
</div>
);
}
API
const { play, replay, reset, isFinished, ...propsReturnedByAnimate } =
useMotionAnimate(selector, keyframes, options, events);
useMotionAnimate
returns:
play
: plays the animationreplay
: Resets and plays the animationreset
: resets the element to its original stylingisFinished
: istrue
when animation has finished playing...propsReturnedByAnimate
: Refer to motion one docs
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 for more. -
options
- Optional parameter. Refer to motion doc's for the values you could pass to this. -
events
- Pass functions of whatever you want to happen when a event likeonFinish
happens.events
usage exampleconst { 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 }, }, );
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