Getting started

A quick tutorial to get you up and running with

1. Install the library

Install the component from your command line.

$ npm add @oku-ui/motion

Adding the plugin

import { createApp } from 'vue'
import { motionPlugin } from '@oku-ui/motion'

const app = createApp({})
app.use(motionPlugin)
app.mount('#app')

2. Import the parts

Import and structure the parts.

<script setup lang="ts">
import { Motion } from '@oku-ui/motion'
</script>

<template>
  <Motion
    class="bg-white size-52 aspect-square rounded-2xl"
    :initial="{ scale: 0 }"
    :animate="{ rotate: 180, scale: 1 }"
    :transition="{
      type: 'spring',
      stiffness: 260,
      damping: 20,
      delay: 0.3,
    }"
  />
</template>

Demo

Here's a complete demo.

TailwindCSS

<script setup lang="ts">
import { Motion } from '@oku-ui/motion'
</script>

<template>
  <Motion
    class="bg-white size-52 aspect-square rounded-2xl"
    :initial="{ scale: 0 }"
    :animate="{ rotate: 180, scale: 1 }"
    :transition="{
      type: 'spring',
      stiffness: 260,
      damping: 20,
      delay: 0.3,
    }"
  />
</template>

Summary

...