import { Meta } from '@storybook/blocks';

<Meta title="Base/Motion" />

# Motion

This component shows you what the basic transitions look like, using our default motion variables:
- Duration (`$duration`): how fast transitions occur
- Timing (`$easing`): the animation curve (linear, ease-in, ease-out, …);

These variables are declared in `00-theme/00-base/00-config/00-variables/_vars-motion.scss`

If you are working on extra animations for your project, they can be added here by modifying the files in:
- `00-theme/00-base/08-motion/styleguide`
