overlay-morph

^{overlay-morph is a lightweight library for creating multi-layered SVG overlays with animated transitions. It is ideal for dynamic scene transitions in SPAs or animated menu effects. The animation is fully customizable, allowing you to adjust timing, easing, and shape behavior.}

^{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.