Menu

useAnimatry Hook

useAnimatry is a React hook that allows you to run animatry logic inside React components.
It creates and manages a context instance automatically and cleans it up on unmount.

Basic Usage

Simply call useAnimatry inside your component and place animations inside the callback:

import { useAnimatry } from '@animatry/react';
import { animatry } from 'animatry';


export default function Example() {
  const ref = useRef(null);


  useAnimatry(() => {
    animatry.to('.box', {
      x: 200,
      duration: 1,
    });
  });


  return <div ref={ref} className="box red" />;
}

Scoped Animations

You can pass a scope ref to limit all animations to elements inside that node.

const scopeRef = useRef(null);


useAnimatry(() => {
  animatry.to('[data-animate]', { x: 100 });
}, {
  scope: scopeRef
});


return (
  <div ref={scopeRef}>
    <div data-animate className="box red" />
  </div>
);

Reactive Dependencies

You can rerun the animation when dependencies change by passing a dependency array or using dependencies inside an options object.

useAnimatry(() => {
  animatry.to('.box', { x: 100 });
}, [someValue]);

Configuration Options

Property
Description
scope
An optional ref to limit animation queries to a DOM subtree.
dependencies
Array of dependencies to re-run the callback on change.