Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
dev
Dec 4, 2017
Dec 4, 2017
Dec 4, 2017

Pixel Wave Page Transition

Pixel Wave Animation Preview Pixel Wave Animation Mobile

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 :)

About

Fully customizable pixel wave animation for seamless page transitions.

Topics

Resources

Releases

No releases published

Packages

No packages published