Vue Composables putting your components in motion
Let's get started by installing the package and adding the plugin.
From your terminal:
npm install @vueuse/motion
In your Vue app entry file:
import { createApp } from "vue";
import { MotionPlugin } from "@vueuse/motion";
import App from "./App.vue";
const app = createApp(App);
app.use(MotionPlugin);
app.mount("#app");
You can now animate any of your component, HTML or SVG elements using v-motion.
<template>
<div
v-motion
:initial="{
opacity: 0,
y: 100,
}"
:enter="{
opacity: 1,
y: 0,
}"
/>
</template>
To see more about how to use directives, check out Directive Usage.
To see more about what properties you can animate, check out Motion Properties.
To see more about how to create your own animation styles, check out Transition Properties.
To see more about what are variants and how you can use them, check out Variants.
To see more about how to control your declared variants, check out Motion Instance.
You can try out the latest changes before a stable release by installing the nightly release channel.
npm install @vueuse/motion@npm:vueuse-motion-nightly
This package is heavily inspired by Framer Motion by @mattgperry.
If you are interested in using WAAPI, check out Motion.dev!
I would also like to thank antfu, patak-dev and kazupon for their kind help!
If you like this package, consider following me on GitHub and on Twitter.
๐
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4