Animated SVG Waves In jQuery - jquery.waves.js

Animated SVG Waves In jQuery - jquery.waves.js

jquery.waves.js is a small JavaScript library which lets you create configurable, smoothly animated waves using jQuery, SVG, and GSAP's TweenMax.

Inspired by Mikołaj Stolarski's SVG Waves.

1. Include the necessary jQuery and TweenMax libraries from CDN.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
 </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js" 
        integrity="sha384-FnCBqnv8Ooragy2NhzDDRIKYAUR7YclZ/H7KIyBhDrsJrgLsM+dtDOOttUP5gNWB" 
        crossorigin="anonymous">
</script>

2. Create a SVG element for the wave.

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" id="example">
  <path id="myWave" d=""></path>
</svg

3. Call the plugin to animate the SVG path just like the waves.

$('#myWave').drawWaves();

4. Config the animated waves with the following options.

  • container: where to render the animated wave
  • color: color of the wave
  • height: height of the wave
  • waveDelta: wave amplitude
  • wavePoints:  how many point will be used to compute the wave
  • speed: animation speed
$('#myWave').drawWaves({
  // defaults
  container: 'body',
  color: '#33ABF9',
  height: 200,
  waveDelta: 100,
  wavePoints: 3,
  speed: .15
  
});

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

  • Publication date: 18.07.2018
  • Source