Getting Started

Welcome to VueMotion!

With VueMotion, you can rapidly make animations in everywhere. You can use VueMotion to make video clip, animation producing and more cool things you may consider or not consider. Now let's begin the travel!

You can choose three ways to use VueMotion:

Location with CLI Browser with Vite

Start with CLI

First, you need to globally install the cli tools:

$ npm i -g @vue-motion/client

And find a directory, type the following command:

$ vuemotion create <your-project-name>
$ cd <your-project-name>

And then install the dependencies:

$ pnpm i

Finally, use start command to start the studio

$ pnpm start

When you edit the animation to your satistify, you can use export command to export the video:

$ pnpm export 3 # The export duration is 3s.

Start with Browser and Vite

Firstly, you need prepare the following develop tools:

• NPM / PNPM / Yarn
• A code editor such as VSCode
• A modern Browser such as Chrome, Firefox, Edge

And then you need initialize them, we use pnpm as the example:

$ pnpm create vite my-vuemotion-project

Choose Vue framework, and then:

$ cd my-vuemotion-project
$ pnpm install
$ pnpm add @vue-motion/core @vue-motion/lib

Begin

Now find the top-level component (./src/App.vue), delete the example codes and try to use the following codes:

<script setup lang="ts">
import { Motion, Rect } from '@vue-motion/lib'
</script>

<template>
  <Motion :width="1600" :height="900">
    <Rect :width="300" :height="300"/>
  </Motion>
</template>

And then you can find a Rectangle on the screen

Congratulations! You have got the usage of widgets, but now the graphs are static, we need let it dynamic.

<script setup lang="ts">
import { usePlayer } from '@vue-motion/core'

const player = usePlayer()
player.play()
</script>

The function will launch the animation with requestAnimationFrame.

Let's add some animations on the rectangle:

<script setup lang="ts">
import { usePlayer, useWidget } from '@vue-motion/core'
import { move, Motion, Rect } from '@vue-motion/lib'

const player = usePlayer()

const rect = useWidget('rect')
player.useAnimation(rect)
  .animate(move, 3, {
    offsetX: 200,
    offsetY: 300
  })

player.play()
</script>

<template>
  <Motion :width="1600" :height="900">
    <Rect :width="300" :height="300"/>
  </Motion>
</template>

First, we add a wid attribute on the Rect component, and then we called useWidget to get the widget, finally we add a animation move on it.

Now launch it:

$ pnpm start

If everything is okay, you will see the direct animation in the browser

Now the animation is running, but it looks a little wired, let's add a easing function on it!

VueMotion offers many easing functions you would choose. We choose easeBounce:

<script setup lang="ts">
import { usePlayer, useWidget } from '@vue-motion/core'
import { move, Motion, Rect, easeBounce } from '@vue-motion/lib'

const player = usePlayer()

const rect = useWidget('rect')
player.useAnimation(rect)
  .animate(move, 3, {
    offsetX: 200,
    offsetY: 300,
    by: easeBounce
  })

player.play()
</script>

<template>
  <Motion :width="1600" :height="900">
    <Rect :width="300" :height="300"/>
  </Motion>
</template>

Via setting by to add easing function on a animation.

Okay! You have handled the basic usage of VueMotion, now continue your adventure!