ripple-effect

Applies a ripple effect that distributes normalized values [0; 1] from a center point. Useful for animations or visual emphasis.

Installation

npm i @phucbm/ripple-effect

pnpm add @phucbm/ripple-effect

Usage

import {applyRippleEffect} from '@phucbm/ripple-effect';

const elements = document.querySelectorAll('.item');

applyRippleEffect({
    length: elements.length,
    centerIndex: 5,
    rippleRadius: 3,
    callback: (normalizedValue, index) => {
        const scale = 1 + normalizedValue; // [1.0 - 2.0]
        elements[index].style.transform = `scale(${scale})`;
    }
});

Development

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build the package
pnpm run build

# Run tests in watch mode
pnpm run test:watch

License

MIT © phucbm