Shape-overlays NPM

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.