shape-overlays

^{Multi-layered SVG shape overlays that are dynamically generated with adjustable
properties are used in creating transitions in SPA or for designing drawer menus
Original idea by Yoichi Kobayashi}

^{1kB gzipped}

Demo

➤ Install

$ yarn add gsap
$ yarn add shape-overlays

➤ Import

import gsap from 'gsap';
import ShapeOverlays from 'shape-overlays';

➤ Usage

ShapeOverlays.registerGSAP(gsap);

const shapeOverlays = new ShapeOverlays({
  svgEl: '.svg',
  pathEl: '.path',
  numberPoints: 4,
  delayPoints: 0.3,
  delayPaths: 0.25,
  duration: 1,
  ease: 'power2.inOut',
});

shapeOverlays.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.

➤ API

Method	Description
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.
init()	Initializes the overlay with the given options.
destroy()	Destroys the overlay instance, cleaning up any created elements and animations.
reinitialize(options)	Reinitializes the overlay with new options.

➤ License shape-overlays is released under MIT license.