Animated

Animation with unmount watcher

Animated can be used to manage animations. One of its key benefits is that it ensures animations are completed before the component is unmounted.

Anatomy

import { Animated } from '@onwo/primitives';

<Animated> ... </Animated>

Simple

const visibleBox = useSignal<boolean>(true);

<Animated
  bind:visible={visibleBox}
  in={{ timing: 'ease-in', opacity: 0, slide: { x: '-5rem' } }}
  out={{ timing: 'ease-in', opacity: 0, slide: { x: '5rem' } }}
  class="w-fit"
>
  <div class="bg-[#28b66e] w-32 h-32" />
</Animated>

Infinite

<Animated
  in={{
    timingFunction: 'linear',
    iterationCount: 'infinite',
    durationMs: 3000,
    rotate: 360,
  }}
  class="w-fit"
>
  <OtherSmileIcon size="3rem" />
</Animated>