Smooth Wave/Liquid Animation With jQuery, GSAP And SVG

Smooth Wave/Liquid Animation With jQuery, GSAP And SVG

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



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

  • Publication date: 22.08.2018
  • Source