Pixel Wave Page Transition

Install

At the bottom of your body:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/PixelWave-min.js"></script>

var pixelwave = new PixelWave({
    // options like:
    // canvasTop: 0
});

Run Animation

pixelwave.start();

Options

When starting the wave you can add callback functions to get executed at certain times:

pixelwave.start([runsAtStart], [runsAtMiddle], [runsAtEnd]);

You can pass these options while you init the wave:

Full Example with options

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/PixelWave-min.js"></script>

var pixelwave = new PixelWave({
    canvasTop: 50, //for a header
    speedIn: 3,
    speedOut: 1,
    autoCalculateSquaresSize: true,
    color: '#000000'   
});

function start () {console.log('start')}
function middle () {console.log('middle')}
function end () {console.log('end')}

document.getElementById('startImage').addEventListener('click', function() {
    pixelwave.start(start, middle, end);
})

Dependencies

Greensockets amazing gsap.

Contribution

If anyone wants to contribute, just fork the project or write me at [email protected] :)