Vue.js Animation Library – Tinymotion

Install & Download:

# NPM
$ npm i tinymotion

Description:

Tinymotion is a Vue.js animation library that seamlessly works with Tailwind CSS.

How to use it:

1. Import and register the Tinymotion.

import Motion from 'tinymotion';

export default {
  components: { Motion },
  data() {
    return {
      motion: {
        // parameters here
      }
    }
  }
}

2. Trigger the animation on hover.

<Motion
  :hover="[
    'rotate-0 rounded-xl',
    'rotate-102 rounded-2xl scale-75',
    'rotate-90 rounded-xl scale-100',
  ]"
  :options="{ instantRollback: true }"
  class="w-24 h-24 bg-indigo-600"
/>

3. Trigger the animation on click.

<Motion
  :click="[
    'rotate-0 rounded-2xl',
    'rotate-102 rounded-xl scale-50',
    'rotate-90 rounded-2xl scale-100',
  ]"
  class="w-24 h-24 bg-indigo-600 cursor-pointer"
/>

4. Trigger the animation by a custom element.

<Motion
  v-model="trigger"
  :trigger="[
    'rotate-0 bg-blue-600 rounded-xl',
    'rotate-12 scale-125 bg-indigo-600',
    '-rotate-6 scale-150 rounded-3xl',
    'rotate-0 scale-100 rounded-xl bg-rose-600',
  ]"
  class="w-24 h-24 cursor-pointer"
/>

5. Trigger the animation on app load.

<Motion
  :auto="[
    'scale-50',
    'scale-75',
    'scale-100',
    'scale-125',
  ]"
  :options="{ repeat: true, duration: 500 }"
  class="w-24 h-24 rounded-full bg-indigo-600"
/>

6. All possible parameters:

hover: [],
click: [],
trigger: [],
auto: [],
instantRollback: false,
rollback: true,
repeat: false,
factor: 0,
delay: 0,
stepDelay: 0,
skip: 0,
duration: 300,
ease: "ease-in-out",

Preview: