Vue-scroll-ease NPM

vue-scroll-ease

vue-scroll-ease is a Vue 3 directive designed to add smooth reveal animations to your elements as they scroll into view. It's a lightweight and easy-to-use solution for adding scroll-triggered animations to your Vue.js applications.

Installation

You can install vue-scroll-ease via npm:

npm install vue-scroll-ease

Usage

First, register the vue-scroll-ease directive in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import VueScrollEase from 'vue-scroll-ease';
createApp(App).use(VueScrollEase).mount('#app');

USAGE

Once registered, you can use the v-scroll-ease directive in your components to add scroll animations:

<template>
  <div v-scroll-ease="{from:200,direction:'left',rotate:360,delay:200}"></div>
</template>

TypeScript Integration

To ensure TypeScript recognizes the vue-scroll-ease module, add the following declaration to your shims-vue.d.ts (or any .d.ts file in your project):

declare module 'vue-scroll-ease' {
    import { Plugin } from 'vue';
    const VueScrollEase: Plugin;
    export default VueScrollEase;
}

Directive Options

Option	Description	Example Value	Notes
from	Specifies the starting position for the animation based on the direction. Automatically handled based on the chosen direction.	`200`	Determines how far the element should move from its initial position.
direction	Defines the direction of the animation.	`'left'`, `'right'`, `'top'`, `'bottom'`, `'left-top'`, `'right-top'`, `'left-bottom'`, `'right-bottom'`	Indicates the direction from which the element will animate into view.
rotate	Adds rotation to the element. Accepts both positive and negative degree values.	`90`, `-90`	Defines the rotation angle in degrees.
delay	Sets the delay before the animation starts (in milliseconds).	`200`	Specifies how long to wait before the animation begins.
duration	Specifies the length of the animation in seconds.	`1`, `2.5`	Controls how long the animation lasts.

Examples

Option	Example	Result
from	`from: 100`	The element starts 100px from its final position.
direction	`direction: 'top'`	The element will animate from the top into view.
rotate	`rotate: 45`	The element will rotate 45 degrees during the animation.
delay	`delay: 300`	The animation will start after 300 milliseconds.
duration	`duration: 2`	The animation will last for 2 seconds.

Key Features

Scroll Reveal Ease: Easily apply scroll-triggered reveal animations to elements.
Customizable Directions: Animate elements from various directions (top, bottom, left, right, left-top, right-top, left-bottom, right-bottom) with a simple directive.
Rotation: Add rotation to elements by specifying the rotate value in degrees.
Delay: Introduce a delay before the animation starts using the delay option.
Duration: Control the length of the animation with the duration option.
Automatic Cleanup: Automatically removes event listeners when elements are unmounted, preventing memory leaks.
Lightweight and Fast: Minimal footprint ensures smooth and fast animations without performance degradation.
Easy Integration: Quick to set up in any Vue 3 project, with flexible options for customization.
TypeScript Support: The current version of vue-scroll-ease includes full TypeScript support.