@kabaliserv/wavify v0.2.2

Wavify

Wavify is a simple library to draw animated wave on a website.

The library is heavily adapted from a codepen board (https://codepen.io/grimor/pen/qbXLdN).

Warning: It has been notified that the use of this plugin introduce performance issues in limited setups or on some mobile devices.

Installation

NPM:

$ npm install @kabaliser/wavify

$ yarn add @kabaliserv/wavify

CDN:

<script src="https://cdn.jsdelivr.net/gh/wilson-kbs/wavify@v0.2/lib/wavify.min.js"></script>

Usage

Usage is very simple.

In the html add the following code:

<div id="wave"></div>

Then in your JavaScript file add this:

// With Javascript vanilla
const myWave = wavify.default('#wave', {
  height: 60,
  bones: 3,
  amplitude: 40,
  position: "top"
  color: 'rgba(150, 97, 255, .8)',
  speed: .25,
  autostart: false
});

// With NPM
import wavify from '@kabaliserv/wavify';
const myWave = wavify('#wave', {
  height: 60,
  bones: 3,
  amplitude: 40,
  position: "top"
  color: 'rgba(150, 97, 255, .8)',
  speed: .25,
  autostart: false
});

Option Parameters

Available Functions

play

Will play current running animation if paused before

myWave.play();

pause

Will pause current running animation

myWave.pause();

Copyright and license

Code released under the MIT License.

Credits

Fork of wavify.