pixel-animate-vue

Vue 3 animate on scroll module(directive). Very simple and lightweight. SSR-friendly.

To install package run:

# installation
npm install pixel-animate-vue

Import and use as directive

# installation
import {vAnimate} from 'pixel-animate-vue';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).directive('animate', vAnimate).mount("#app");

Import css or scss file wherever you want or need

import 'pixel-animate-vue/a-class.css'
#or
import 'pixel-animate-vue/a-class.scss'

Usage are pretty simple

Key class in v-animate can be a string with your class with keyframes. This is how you can make custom animations

<script lang="ts" setup>
import {fade, scale, slide} from 'pixel-animate-vue';
</script>

#default usage
<div class="some-block" v-animate="{class: scale.in}">
  some content
</div>

#advanced usage with animation duration and delay
<div class="some-block" v-animate="{class: slide.inRight, delay: 0.5, duration: 2}">
  some content
</div>

#advanced usage with delay using index (with every step delay will be multiply by index)
<div class="some-block" v-for="i in 5" :key="i" v-animate="{class: fade.inLeft, delay: 0.35, index: i}">
  some content {{i}}
</div>

List of animations

Keys in objects are just classes

const slide = {
  inRight: 'a-slide-right',
  inLeft: 'a-slide-left',
  inTop: 'a-slide-top',
  inBottom: 'a-slide-bottom'
};

const fade = {
  in: 'a-fade-in',
  inTop: 'a-fade-in-top',
  inDown: 'a-fade-in-down',
  inLeft: 'a-fade-in-left',
  inRight: 'a-fade-in-right',
  out: 'a-fade-out'
};

const text = {
  expand: 'a-text-expand',
  contract: 'a-text-contract'
};

const scale = {
  in: 'a-scale',
  out: 'a-scale-out'
};

const flip = {
  default: 'a-flip',
  inTop: 'a-flip-in-top',
  inBottom: 'a-flip-in-bottom'
};