Fully customizable pixel wave animation for seamless page transitions.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev license Dec 4, 2017
dist license Dec 4, 2017
.gitignore Removed codekit file Dec 4, 2017
README.md updated plugin name Dec 4, 2017
index.html added dist Dec 4, 2017

README.md

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 vinzenz@sansho.studio :)