<template>
  <Framer appear :variants="variants">
    <div v-if="isShow" i-carbon-windy-snow text-4xl inline-block />
  </Framer>
</template>

<script lang="ts" setup>
  import { Framer, defineVariants, spring } from '@bryce-loskie/frame'

  const variants = defineVariants({
    enter: {
      x: [-200, 0],
      scale: [1, 2],
      options: {
        easing: spring(),
      },
    },
    leave: {
      x: 200,
      opacity: 0.5,
      scale: 1,
    },
  })
</script>

<template>
  <div ref="elRef" i-carbon-windy-snow text="4xl sky-500" inline-block />
  <button class="m-3 text-sm btn capitalize" @click="animation?.reverse()">
    reverse
  </button>
</template>

<script lang="ts" setup>
  import { useFrame, spring } from '@bryce-loskie/frame'

  const elRef = ref()
  const animation = useFrame(
    elRef,
    {
      x: [-200, 0],
      scale: [1, 2],
    },
    {
      easing: spring(),
    }
  )
</script>

<template>
  <div v-frame="keyframes" i-carbon-windy-snow text="4xl sky-500" inline-block />
</template>

<script lang="ts" setup>
  import { defineDirective, defineFrame, spring } from '@bryce-loskie/frame'

  const vFrame = defineDirective()
  const keyframes = defineFrame({
    x: [-200, 0],
    scale: [1, 2],
  }, {
    easing: spring(),
  })
</script>