Lightweight Motion One Animation Component For Vue 3

Install & Download:

# Yarn
$ yarn add @oku-ui/motion
# NPM
$ npm install @oku-ui/motion
# PNPM
$ pnpm add @oku-ui/motion

Description:

A lightweight, Motion One-powered animation library that adds springs, independent transforms, and hardware accelerated animations to Vue 3 applications.

How to use it:

1. Install and import the Motion One component.

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

2. Add the Motion component to the template.

<template>
  <Motion />
</template>

3. Available component props to customize the animations.

tag?: string
initial?: VariantDefinition | boolean
animate?: VariantDefinition
inView?: VariantDefinition
hover?: VariantDefinition
press?: VariantDefinition
exit?: VariantDefinition
variants?: Variants
inViewOptions?: InViewOptions
transition?: AnimationOptionsWithOverrides

Preview: