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.

Changelog

For detailed changes and updates, please see the CHANGELOG.

Issue

To Create Issue ,please see this ISSUE

Acknowledgment

Special thanks to Pramod Laha for contributing to the UI part. You can check out his work in the vse repository.