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="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();

Changelog:

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.

  • Publication date: 22.08.2018
  • Source