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

Smooth Wave/Liquid Animation With jQuery, GSAP And SVG - Wavify
File Size: 7.02 KB
Views Total: 16673
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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:

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="" class="wave">
  <title>My Wave Animation</title>
  <path id="demo" d="">

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


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


  // 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

// play animation;

// kill the current animation

// reboot animation

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



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


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