Tinymotion
Tinymotion is a Vue.js animation library, that seamlessly works with Tailwind CSS.
| Hover | Click | Trigger | Auto |
|
|
|
|
| Switch | Grid | Shuffle | Loader |
|
|
|
|
Installation
npm i -S tinymotionHow 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>Examples
Roadmap
This project is in the early development stage. If you want to help to improve this, you are welcome to create a PR.