pixel-animate-vue

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

To install package run:

1# installation
2npm install pixel-animate-vue

Import and use as directive

1# installation
2import {vAnimate} from 'pixel-animate-vue';
3import { createApp } from 'vue';
4import App from './App.vue';
5
6createApp(App).directive('animate', vAnimate).mount("#app");

Import css or scss file wherever you want or need

1import 'pixel-animate-vue/a-class.css'
2#or
3import '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

1<script lang="ts" setup>
2import {fade, scale, slide} from 'pixel-animate-vue';
3</script>
4
5#default usage
6<div class="some-block" v-animate="{class: scale.in}">
7  some content
8</div>
9
10#advanced usage with animation duration and delay
11<div class="some-block" v-animate="{class: slide.inRight, delay: 0.5, duration: 2}">
12  some content
13</div>
14
15#advanced usage with delay using index (with every step delay will be multiply by index)
16<div class="some-block" v-for="i in 5" :key="i" v-animate="{class: fade.inLeft, delay: 0.35, index: i}">
17  some content {{i}}
18</div>

List of animations

Keys in objects are just classes

1const slide = {
2  inRight: 'a-slide-right',
3  inLeft: 'a-slide-left',
4  inTop: 'a-slide-top',
5  inBottom: 'a-slide-bottom'
6};
7
8const fade = {
9  in: 'a-fade-in',
10  inTop: 'a-fade-in-top',
11  inDown: 'a-fade-in-down',
12  inLeft: 'a-fade-in-left',
13  inRight: 'a-fade-in-right',
14  out: 'a-fade-out'
15};
16
17const text = {
18  expand: 'a-text-expand',
19  contract: 'a-text-contract'
20};
21
22const scale = {
23  in: 'a-scale',
24  out: 'a-scale-out'
25};
26
27const flip = {
28  default: 'a-flip',
29  inTop: 'a-flip-in-top',
30  inBottom: 'a-flip-in-bottom'
31};