<Animatry> Component

The <Animatry> component is a simple way to define a scoped animation context within your React component tree.
It automatically registers and cleans up animations tied to the rendered content.

Usage

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

export default function Demo() {
  return (

    <Animatry load={() => {
      animatry.to('.red', { x: 300 }); // do whatever you want
    }}>

      <div className="red">Animate me</div>

    </Animatry>

  );
}

Animations inside the load function are automatically scoped to the wrapped content.
You don’t need to handle cleanup — the context is destroyed when the component unmounts.

Props

Also see: useAnimatry() hook