~1.7kB gzipped

Demo

➠ Install

yarn add gsap
yarn add wave-path

➠ Import

import gsap from 'gsap';
import WavePath from 'wave-path';

➠ Usage

const wavePath = new WavePath({
  svgEl: '.svg',         // required: SVG element or selector
  // pathEl: 'path',     // optional: selector for <path> inside the SVG, defaults to 'path'
  ease: 'power1.inOut',
  isOpened: false,
  numberPoints: 6,
  delayPoints: 0.3,
  delayPaths: 0.25,
  duration: 1.5,
});

wavePath.init();

// later
await wavePath.open();
await wavePath.close();
await wavePath.toggle();

// helper info
console.log(wavePath.isOpened);            // boolean
console.log(wavePath.totalDurationMs());   // number in ms
wavePath.stopIfActive();                   // kill active timeline if any

➠ Options

| Option | Type | Default | Description | |:---------------|:-------------------------------:|:-----------:|:----------------------------------------------------------------------------------------------| | svgEl | string | SVGElement | required| Required. SVG container selector or element node. | | pathEl | string | 'path' | Selector for the <path> elements inside the SVG container. | | numberPoints | number | 4 | Number of animation points on each path (min 2). | | delayPoints | number | 0.3 | Max random delay per point. | | delayPaths | number | 0.25 | Delay between animation of each path. | | duration | number | 1 | Duration of point animation segment (seconds). | | ease | string | (t:number)=>number | 'none' | Timing function: GSAP ease name (e.g., 'power1.inOut') or a custom easing function. | | isOpened | boolean | false | Initial state. Use open(), close(), or toggle() to change it at runtime. |

➠ API

| Member / Method | Description | |:------------------------|:--------------------------------------------------------------------------------------------------------| | init() | Initializes the overlay with the given options. Idempotent. | | toggle() | Toggles between opened/closed. Returns a Promise<void> resolved on animation complete. | | open() | Opens the overlay. Returns a Promise<void> resolved on animation complete. | | close() | Closes the overlay. Returns a Promise<void> resolved on animation complete. | | totalDurationMs() | Returns the total duration of the current timeline in milliseconds. | | stopIfActive() | Stops the current animation timeline if active. Useful for cancelling or resetting animations. | | destroy() | Cleans up all callbacks, tweens, and timeline; safe to call multiple times. | | isOpened (getter) | Current logical state of the overlay (boolean). |

➠ Notes

• Peer dependency: gsap >= 3.12.0. Install GSAP in your project alongside wave-path.
• Module formats: ships both ESM and CJS builds; TypeScript definitions included.
• Rendering: the library updates d attributes of SVG <path> elements to produce smooth multi-segment bezier wave transitions.

➠ License

wave-path is released under the MIT license.