Vue.js Animation Library – Tinymotion


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.

    '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.

    '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.

    '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.

  :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",


Vue.js Animation Library - Tinymotion

Download Details:

Author: lepikhinb

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i tinymotion

You Might Be Interested In:

Add Comment