Smooth Wave/Liquid Animation With jQuery, GSAP And SVG - Wavify

jQuery Wavify is a fancy jQuery plugin used for creating smooth, responsive and configurable wave/liquid animations using SVG and GSAP's TweenMax library.

See also:

• Creating Animated Waves Using jQuery and Canvas

How to use it:

1. Load the necessary jQuery and TweenMax JavaScript libraries in the html document.

<script src="/path/to/TweenMax.min.js"></script>
<script src="/path/to/jquery.min.js"></script>

2. Download and load the jQuery Waves.js script after jQuery.

<script src="wavify.js"></script>
<script src="jquery.wavify.js"></script>

3. Create an empty SVG element in the document.

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" class="wave">
  <title>My Wave Animation</title>
  <defs></defs>
  <path id="demo" d="">
</svg>

4. Call the function wavify() on the SVG's path element to generate a default wave effect.

$('#demo').wavify();

5. Customize the wave animation by pass the following options to the wavify() function.

$('#demo').wavify({

  // Height of wave
  height: 200,

  // Amplitude of wave
  amplitude: 100,

  // Animation speed
  speed: .15,

  // Total number of articulation in wave
  bones: 3,

  // Color
  color: 'rgba(255,255,255, 0.20)'
  
});

6. API methods.

// pause animation
instance.pause();

// play animation
instance.play();

// kill the current animation
instance.kill();

// reboot animation
instance.reboot();

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

Changelog:

2018-08-23

• feature(config): rewrite function definition and add callback method

2018-08-22

• fix(resize): fix resize method

---

This awesome jQuery plugin is developed by peacepostman. For more Advanced Usages, please check the demo page or visit the official website.