800B gzipped

Installation

ShapeOverlays requires GSAP library to work.

$ yarn add gsap
$ yarn add shape-overlays

Import

Import GSAP, ShapeOverlays and initialize it.

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

ShapeOverlays.registerGSAP(gsap)

const overlay = new ShapeOverlays({
	svgClassName: '.svg-overlay',
	pathClassName: '.svg-overlay path'
})

Options

You can configure ShapeOverlays via options.

const overlay = new ShapeOverlays({
	svgClassName: '.svg-overlay',
	pathClassName: '.svg-overlay path',
	numberPoints: 4,
	delayPoints: 0.3,
	delayPaths: 0.25,
	duration: 1,
	ease: 'power2.inOut'
})

| Option | Type | Default | Description | | :--------------- | :---------------------------: | :------: | :------------------------------------------------------------------------ | | svgClassName | string | HTMLElement | null | Required. SVG container selector. | | pathClassName | 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 | | :----------------------------------- | :----------------------------------------------------------------------------------------------- | | overlay.toggle() | Toggles the animation state between human and closed. | | overlay.entry() | Sets the animation state to open. | | overlay.leave() | Sets the animation state to closed. | | overlay.totalDuration() | Returns the total duration of the animation in milliseconds. |

License

shape-overlays is released under MIT license.