Need help with wavify?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

peacepostman
163 Stars 25 Forks MIT License 32 Commits 4 Opened issues

Description

Generate beautiful animated waves using svg, javascript and some tweenMax magic.

Services available

!
?

Need anything else?

Contributors list

Wavify

NPM version

Wavify is a simple library to draw animated wave on a website.

The library is heavily adapted from a codepen board (https://codepen.io/grimor/pen/qbXLdN).

Wavify can be used as a jQuery plugin or with vanilla JavaScript.

A playground for jQuery can be accessed here: http://codepen.io/peacepostman/pen/jBavvN/

You can also see it in production here: https://potion.social/fr/plans-entreprise

Warning: It has been notified that the use of this plugin introduce performance issues in limited setups or on some mobile devices.

Installation

Clone repo or run

npm i wavify
.

Usage

Usage is very simple. First, be sure to include TweenMax (https://greensock.com/tweenmax). If you are using Wavify as a jQuery (https://jquery.com/) plugin be sure to include jQuery too.

Here is a HTML header example:


or



In the html add the following code:


Then in your JavaScript file add this:

// For Vanilla JavaScript
var myWave = wavify( document.querySelector('#myId'), {
  height: 60,
  bones: 3,
  amplitude: 40,
  color: 'rgba(150, 97, 255, .8)',
  speed: .25
})

// For jQuery var myWave = $('#myID').wavify({ height: 60, bones: 3, amplitude: 40, color: 'rgba(150, 97, 255, .8)', speed: .25 });

Option Parameters

| Property | Description | Default Value | | ------------ | :-------------------------------------------------------------------------- | :---------------------- | | container | Element query selector for parent container; used for calculating wave size | 'body' | | color | CSS color for the wave, can be Hex, rgb, rgba | rgba(255,255,255, 0.20) | | bones | Number of articulations in the wave | 3 | | speed | Animation speed | 0.15 | | height | Height of the wave from crest to trough | 200 | | amplitude | Vertical distance wave travels | 100 |

Available Functions

updateColor

Will animate wave color to a new value.

Available parameters are :

| Property | Description | Default Value | | ------------ | :----------------------------------------------- | :---------------- | | timing | Duration for transition in seconds | 1 | | color | CSS color for the wave, can be Hex, rgb, rgba | original color | | onComplete | A function to be executed on transition complete | null |

myWave.updateColor({
  color: 'rgba(150, 97, 255, .8)'
});

or

myWave.updateColor({ color: '#FFF', timing: 10 });

or

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

pause

Will pause current running animation

myWave.pause();

play

Will play current running animation if paused before

myWave.play();

kill

Will kill current animation.

myWave.kill();

reboot

Will reboot animation. New parameters can be provided. Please avoid changing selector, there is no logic reason to do that :D

Refer to configuration options to see available parameters

myWave.reboot();

OR

myWave.reboot({ height: 80, bones: 10, amplitude: 60, color: 'rgba(150, 97, 255, .2)', speed: .45 });

Copyright and license

Code released under the MIT License.

Credits

Thanks joeyparis for his PRs.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.