Overlay-morph NPM

1.4kB gzipped

Demo

➤ Install

$ yarn add gsap
$ yarn add overlay-morph

➤ Import

import { gsap } from 'gsap';
import OverlayMorph from 'overlay-morph';

➤ Usage

const overlayMorph = new OverlayMorph({
  svgEl: '.svg',
  pathEl: '.svg path',
  ease: 'power2.inOut',
  isOpened: false,
  numberPoints: 5,
  delayPoints: 0.3,
  delayPaths: 0.25,
  duration: 1.5,
});

overlayMorph.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.
`isOpened`	`boolean`	`false`	Defines whether the overlay starts in an opened (`true`) or closed (`false`) state. The `toggle()`, `entry()`, and `leave()` methods can be used to change the state dynamically.

➤ API

Method	Description
`init()`	Initializes the overlay with the given options.
`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.
`destroy()`	Destroys the overlay instance, cleaning up any created elements and animations.

➤ License overlay-morph is released under MIT license.

shape overlays GSAP transition SVG

1.0.0

4 months ago

1.0.0-dev.0

4 months ago