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).

Wavify can be used as a jQuery plugin or with vanilla JavaScript.

A playground for jQuery can be accessed here: http://codepen.io/peacepostman/pen/jBavvN/

You can also see it in production here: https://potion.social/fr/plans-entreprise

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

Usage

Usage is very simple. First, be sure to include TweenMax (https://greensock.com/tweenmax). If you are using Wavify as a jQuery (https://jquery.com/) plugin be sure to include jQuery too.

Here is a HTML header example:

<!-- Vanilla JavaScript -->
<script src="/js/TweenMax.min.js"></script>
<script src="/js/wavify/wavify.js"></script>

or

<!-- As jQuery Plugin -->
<script src="/js/TweenMax.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/wavify/wavify.js"></script>
<script src="/js/wavify/jquery.wavify.js"></script>

In the html add the following code:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs></defs><path id="myID" d=""/></svg>

Then in your JavaScript file add this:

// For Vanilla JavaScript
var myWave = wavify( document.querySelector('#myId'), {
  height: 60,
  bones: 3,
  amplitude: 40,
  color: 'rgba(150, 97, 255, .8)',
  speed: .25
})

// For jQuery
var myWave = $('#myID').wavify({
  height: 60,
  bones: 3,
  amplitude: 40,
  color: 'rgba(150, 97, 255, .8)',
  speed: .25
});

Option Parameters

| Property | Description | Default Value | | ------------ | :-------------------------------------------------------------------------- | :---------------------- | | container | Element query selector for parent container; used for calculating wave size | 'body' | | color | CSS color for the wave, can be Hex, rgb, rgba | rgba(255,255,255, 0.20) | | 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 |

Available Functions

updateColor

Will animate wave color to a new value.

Available parameters are :

| Property | Description | Default Value | | ------------ | :----------------------------------------------- | :---------------- | | timing | Duration for transition in seconds | 1 | | color | CSS color for the wave, can be Hex, rgb, rgba | original color | | onComplete | A function to be executed on transition complete | null |

myWave.updateColor({
  color: 'rgba(150, 97, 255, .8)'
});

or

myWave.updateColor({
  color: '#FFF',
  timing: 10
});

or

myWave.updateColor({
  color: '#FFF',
  timing: 10,
  onComplete: function(){
    console.log('Transition Complete !')
  }
});

pause

Will pause current running animation

myWave.pause();

play

Will play current running animation if paused before

myWave.play();

kill

Will kill current animation.

myWave.kill();

reboot

Will reboot animation. New parameters can be provided. Please avoid changing selector, there is no logic reason to do that :D

Refer to configuration options to see available parameters

myWave.reboot();

OR

myWave.reboot({
  height: 80,
  bones: 10,
  amplitude: 60,
  color: 'rgba(150, 97, 255, .2)',
  speed: .45
});

Copyright and license

Code released under the MIT License.

Credits

Thanks joeyparis for his PRs.