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:

Description	Name	Default
Set width of Pixel	xSize	48
Set height of Pixel	ySize	48
How many steps there are between full fill and the beginning of the wave. Add as many as you like.	steps	[0.1, 0.1, 0.3, 0.5, 0.5, 1]
Color of the wave	color	#305EFF
Time in s the screen needs to fill.	speedIn	0.7
Time in s the screen needs to empty.	speedOut	0.7
Position top of the canvas element	canvasTop	0
Position left of the canvas element	canvasLeft	0
Sets the z-Index for the canvas element	zIndex	99999
This is a function that sets a given size for different devices. (*add values)	autoCalculateSquaresSize	false
Add a delay in s before animation out runs.	delayMiddle	0

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 v@vinzenzaubry.com :)