useAnimate

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

One Element

TailwindCSS

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

const { animate, scope } = useAnimate()
onMounted(() => {
  animate(scope.el, {
    initial: { scale: 0 },
    animate: { rotate: 180, scale: 1 },
    transition: {
      type: 'spring',
      stiffness: 260,
      damping: 20,
      delay: 0.3,
    },
  })
})
</script>

<template>
  <div
    :ref="scope.registerElement"
    class="bg-white size-52 aspect-square rounded-2xl"
  />
</template>

List

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

TailwindCSS

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

const { animate, scope } = useAnimate()
onMounted(() => {
  animate('li', {
    initial: { scale: 0, opacity: 0 },
    animate: { scale: 1, opacity: 1 },
    transition(index) {
      return {
        delay: index * 0.1,
      }
    },
  })
})
</script>

<template>
  <ul
    :ref="scope.registerElement"
    class="grid grid-cols-4"
  >
    <li
      v-for="i in 20"
      :key="i"
      class="aspect-square w-10 h-10 flex items-center justify-center rounded-2xl bg-white m-2"
    >
      <img class="size-7" src="https://motion.oku-ui.com/logo.svg">
    </li>
  </ul>
</template>

• 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