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/[email protected]/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

| Property | Description | Default Value | | ------------ | :-------------------------------------------- | :---------------------- | | color | CSS color for the wave, can be Hex, rgb, rgba | rgba(255,255,255, 0.20) | | position | Position of the wave | bottom | | bones | Number of articulations in the wave | 3 | | speed | Animation speed | 0.15 | | height | Height of the wave from crest to trough | 200 | | amplitude | Vertical distance wave travels | 100 | | autostart | Auto launch wave animation | true |

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.