Shape-overlays NPM

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.