Motion Presence

Motion for Vue offers a number of ways to animate your UI. Scaling from extremely simple prop-based animations, to more complex orchestration.

• Blazing-Fast Animations
• Effortless Animation Syntax
• Interactive Motion Support
• Dynamic Variant Control
• Scroll & View Animations
• TypeScript-Powered Precision

Installation

Install the component from your command line.

$ npm add @oku-ui/motion

Animation

TailwindCSS

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

const show = ref(true)
</script>

<template>
  <div class="size-52 items-center justify-center flex flex-col">
    <MotionPresence>
      <Motion
        v-show="show"
        class="bg-white  aspect-square rounded-2xl w-40 h-40"
        :initial="{ scale: 0 }"
        :animate="{ rotate: 180, scale: 1 }"
        :exit="{ rotate: 0, scale: 0 }"
        :transition="{
          type: 'spring',
          damping: 20,
          duration: 20,
        }"
      />
    </MotionPresence>
    <button
      class="bg-white  aspect-square rounded-xl p-2 mt-10"
      @click="show = !show"
    >
      {{ show ? 'hide' : 'show' }}
    </button>
  </div>
</template>

Multiple Children Component

TailwindCSS

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

const show = ref(true)
</script>

<template>
  <div class="size-52 items-center justify-center flex flex-col">
    <div class="size-52 flex gap-4 items-center justify-center">
      <MotionPresence multiple>
        <Motion
          v-show="show"
          key="1"
          class="bg-white size-20  aspect-square rounded-2xl flex-1"
          :initial="{ scale: 0 }"
          :animate="{ rotate: 180, scale: 1 }"
          :exit="{ rotate: 0, scale: 0 }"
          :transition="{
            type: 'spring',
            damping: 20,
            duration: 30,
          }"
        />
        <Motion
          v-show="show"
          key="2"
          class="bg-white size-20 aspect-square rounded-2xl flex-1"
          :initial="{ scale: 0 }"
          :animate="{ rotate: 180, scale: 1 }"
          :exit="{ rotate: 0, scale: 0 }"
          :transition="{
            type: 'spring',
            damping: 20,
            duration: 30,
          }"
        />
      </MotionPresence>
    </div>
    <button
      class="bg-white  aspect-square rounded-xl p-2 mt-10"
      @click="show = !show"
    >
      {{ show ? 'hide' : 'show' }}
    </button>
  </div>
</template>