1.4kB gzipped

Demo

➤ Install

$ yarn add gsap
$ yarn add overlay-morph

➤ Import

import { gsap } from 'gsap';
import OverlayMorph from 'overlay-morph';

➤ Usage

const overlayMorph = new OverlayMorph({
  svgEl: '.svg',
  pathEl: '.svg path',
  ease: 'power2.inOut',
  isOpened: false,
  numberPoints: 5,
  delayPoints: 0.3,
  delayPaths: 0.25,
  duration: 1.5,
});

overlayMorph.init();

➤ Options

| Option | Type | Default | Description | |:---------------|:-----------------------------:|:--------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | svgEl | string | HTMLElement | null | Required. SVG container selector. | | pathEl | string | HTMLElement | null | Required. Path selector. | | numberPoints | number | 4 | Number of animation points on each path. | | delayPoints | number | 0.3 | Delay between animation of each point on path. | | delayPaths | number | 0.25 | Delay between animation of each path. | | duration | number | 1 | Duration of animation. | | ease | string | 'none' | Timing function. See gsap easing. | | isOpened | boolean | false | Defines whether the overlay starts in an opened (true) or closed (false) state. The toggle(), entry(), and leave() methods can be used to change the state dynamically. |

➤ API

| Method | Description | |:------------------------|:--------------------------------------------------------------------------------| | init() | Initializes the overlay with the given options. | | toggle() | Toggles the animation state between opened and closed. | | entry() | Sets the animation state to open. | | leave() | Sets the animation state to closed. | | totalDuration() | Returns the total duration of the animation in milliseconds. | | destroy() | Destroys the overlay instance, cleaning up any created elements and animations. |

➤ License overlay-morph is released under MIT license.