Overview

Motion One for Vue is a tiny, performant animation library for VueJS, built on the Motion One platform. With a size of 5kb, it offers capabilities for springs, independent transforms, and hardware-accelerated animations. This quick guide will walk you through the installation process and creating your first animation using Motion One for Vue.

Features

• Tiny and Performant: With a size of 5kb, Motion One for Vue provides smooth animations without impacting performance.
• Spring Animations: Capable of creating animations with spring effects for a more natural motion.
• Hardware Acceleration: Utilizes hardware acceleration for efficient and smooth animations.
• Independent Transforms: Allows for applying transforms independently for more flexibility in animations.

Installation

To install Motion One for VueJS, use npm:

npm install @oku-ui/motion-vue

For Motion One for NuxtJS, install it via npm:

npm install @oku-ui/motion-nuxt

Add @oku-ui/motion-nuxt to the modules section of nuxt.config.ts. Then, import and register the Motion component in your Vue component as follows:

import { Motion } from '@oku-ui/motion-vue';

export default {
  components: {
    Motion,
  },
}

You can use the Motion component to animate HTML or SVG elements. Customize animations further by utilizing transition options, keyframes, and enabling enter/exit animations as needed.

Summary

Motion One for Vue is a lightweight and powerful animation library that seamlessly integrates with VueJS projects. By utilizing this library, developers can enhance user interactions with elegant animations, including spring effects and independent transforms. The installation process is straightforward, and with the provided features like transition options, keyframes, and enter/exit animations, creating dynamic animations becomes more accessible.