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