Animation

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

Installation

Install the component from your command line.

$ npm add @oku-ui/motion

Basic animations

You'll perform almost all animations on a component. This is basically a DOM element with motion superpowers.

import { Motion } from "@oku-ui/motion"

For basic animations, you can update values on the animate prop:

<Motion :keyframes={ opacity: 1 } />

When any value in its animate prop changes, the component will automatically animate to the new target.

x

y

rot

TailwindCSS

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

const x = ref([0])
const y = ref([0])
const rotate = ref([0])

</script>

<template>
  <div class="flex gap-10 items-center">
    <div>
      <Motion
        :animate="{
          x: x[0],
          y: y[0],
          rotate: rotate[0],
        }"
        as="div"
        class="w-[200px] h-[200px] border-dashed border-2 border-sky-500 pointer-events-none"
        :transition="{
          duration: 0.4,
          type: 'spring',
        }"
      />
    </div>
    <div class="grid">
      <div class="flex space-x-2 items-center">
        <p class="font-bold text-xl text-white items-center ">
          x
        </p>
        <Input
          v-model="x"
        />
      </div>
      <div class="flex space-x-2 items-center">
        <p class="font-bold text-xl text-white items-center ">
          y
        </p>
        <Input
          v-model="y"
        />
      </div>
      <div class="flex space-x-2 items-center">
        <p class="font-bold text-xl text-white items-center ">
          rot
        </p>
        <Input
          v-model="rotate"
        />
      </div>
    </div>
  </div>
</template>

Animatable values

Motion can animate any CSS value, even those that can't be animated by browsers, like mask-image. It supports:

• Numbers: 0, 100 etc.
• Strings containing numbers: "0vh", "10px" etc.
• Colors: Hex, RGBA, HSLA.
• Complex strings containing multiple numbers and/or colors (like box-shadow).
• display: none/block and visibility: hidden/visible.