🤹 nuxt-use-motion

This module is a Nuxt implementation of the Vue Composables undefined@vueuse/motionundefined.

For a better understanding of this module, you should check out the original undefinedcomposables pageundefined.

🌍 Documentationundefined

👀 Demosundefined

Setup

In order to use this module, you must have @nuxt/composition-api setup in your project.

Once you installed it, add nuxt-use-motion dependency to your project

yarn add nuxt-use-motion

Add nuxt-use-motion to the modules section of nuxt.config.js

{
  // nuxt.config.js
  modules: ['nuxt-use-motion']
}

Configure your animations 🤹

{
  // nuxt.config.js
  motions: {
    directives: {
      'pop-bottom': {
        initial: {
          scale: 0,
          opacity: 0,
          y: 100
        },
        visible: {
          scale: 1,
          opacity: 1,
          y: 0
        },
      }
    }
  }
}

Usage

In addition to the native undefined@vueuse/motionundefined features, the module allows you to define animations presets from your nuxt.config.js.

Once defined, as shown above, those animations will be available using directives, available in every component of your app.

<template>
  <div v-motion-pop-bottom>Pop from bottom! 🎺</div>
</template>

To see more about how to control animations declared with directives, check out undefinedDirective Usageundefined.

To see more about what properties you can animate, check out undefinedMotion Propertiesundefined.

To see more about how to create your own animations styles, check out undefinedTransition Propertiesundefined.

To see more about what are variants and how you can use them, check out undefinedVariantsundefined.

To see more about how to control your declared variants, check out undefinedMotion Instanceundefined.

Development

1. Clone this repository
2. Install dependencies using yarn install
3. Start development server using yarn dev

License

MIT License