Generate beautiful animated waves using svg, javascript and some tweenMax magic.
Switch branches/tags
Nothing to show
Clone or download
Latest commit f0f01b2 Aug 23, 2018

readme.md

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.querySelect('#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.