Flexible Configurable Waves Animation In Vanilla JavaScript – wavejs

wavejs is a flexible, configurable JavaScript plugin to simulate the waves on the surface of water using Vanilla JavaScript and Canvas API.

See also:

• Generate Animated Waves Using JavaScript And Canvas

How to use it:

Import the main JavaScript file wave.js into the document.

<script src="/path/to/wave.js"></script>

Initialize the wavejs library to generate a basic waves animation. The container parameter is used to specify the target element in which the waves animation will generate.

const waveAnimation = new Wave(container)

Config the waves animation by passing the following options object as the second parameter to the Wave function.

const waveAnimation = new Wave(container,{
      // number of waves
      number: 3,
      // smoothness
      smooth: 50,
      // animation speed
      velocity: 1,
      // height in pixels or percent
      height: .3,
      // color
      colors: ['#ff7657'],
      // border options
      border: {
          show: false,
          width: 2,
          color: ['']
      },
      // opacity 
      opacity: .5,
      // 'top' | 'bottom' | 'left' | 'right'
      position: 'bottom'
      
})

API methods.

// start
waveAnimation.animate();
// pause
waveAnimation.pause();
// set options
setOptions(options);
// reset
reset();