A Vue.js animation library with Tailwind CSS

Tinymotion

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

Installation

npm i -S tinymotion

How to use

<template>
    <Motion
        :hover="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        :options="motion"
        class="w-16 h-16"
    />
</template>

<script>
import Motion from 'tinymotion';

export default {
    components: { Motion },

    data() {
        return {
            motion: {
                repeat: true,           // infinite animation until stopped
                rollback: true,         // reverse animation until return to the first keyframe
                instantRollback: true,  // instantly return to the first keyframe
                delay: 0,               // delay before the start
                stepDelay: 0,           // delay between keyframes
                factor: 1,              // delay factor (number of steps to skip) before every step
                skip: 0,                // number of steps to skip before the first flip
                duration: 600,          // default duration. might be overridden by duration-{value} Tailwind class
                ease: 'ease-in-out',    // transition timing function
            }
        }
    }
}
</script>

Triggers

Hover

Triggers animation on hover. If rollback option is enabled, the animation will start rolling back on mouse leave.

<template>
    <Motion
        :hover="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        class="w-16 h-16"
    />
</template>

Click

Triggers animation on click. If rollback option is enabled, the animation will start rolling back on mouse up.

<template>
    <Motion
        :click="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        class="w-16 h-16"
    />
</template>

Custom trigger

Tinymotion supports external triggers. Once the trigger value is changed, the animation will fire. The next time the value is changed, the animation will stop.

<template>
    <Motion
        v-model="trigger"
        :trigger="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        class="w-16 h-16"
    />

    <button @click="trigger = !trigger">Animate</button>
</template>

<script>
import Motion from 'tinymotion';

export default {
    components: { Motion },

    data() {
        return {
            trigger: false,
        }
    }
}
</script>

GitHub