Flexible Configurable Waves Animation In Vanilla JavaScript – wavejs

Category: Animation , Javascript , Recommended | February 16, 2019
Views Total:3,695 views
Official Page:Go to website
Last Update:February 16, 2019


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:

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
// pause
// set options
// reset

You Might Be Interested In:

Leave a Reply