matchMedia

matchMedia allows you to conditionally run animations (or any animatry logic) based on media queries.
It's useful for responsive behavior without manual window size checks.

Basic Usage

Pass a CSS media query and a callback. The callback is executed whenever the query matches.
If the query stops matching, the context is cleared and any cleanup function is called.

import { matchMedia, animatry } from 'animatry';

matchMedia('(min-width: 768px)', () => {
  animatry.to('.box', {
    x: 300,
    duration: 1,
  });

  return () => {
    console.log('Media query no longer matches.');
  };
});

Context Integration

The callback receives an animatry context, which is automatically created and cleared depending on the media state.
This ensures scoped animations and proper cleanup.

Return Value

The function returns a cleanup function that you can call manually to remove the media listener and clean up the context.

const stop = matchMedia('(prefers-reduced-motion: no-preference)', () => {
  // run animations
});

// later
stop();

Configuration