@leetajz/vue-directive v1.0.3

Vue-directive

Simple directive to apply animation/class when element is scrolled into view.

Install:

npm i @leetajz/vue-directive

Register

plugins: [
    ...
    '@/node_modules/@leetajz/vue-directive'
    ...
]

Usage

<div v-animate="{ threshold: .3, animation: 'slide-in', duration: '.5s' }"></div>

<div v-addClass="{ threshold: .3, class: 'slide-in', duration: '.5s' }"></div>

Options:

CSS:

@keyframes left-slide {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}