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
800B gzipped
Demo
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.