background-wave-transition

A background wave transition component with pixi.js.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
background-wave-transition
Minified + gzip package size for background-wave-transition in KB

Readme

Background Wave Transition

  • A background wave transition component with pixi.js.
  • Here is an example.

How to use

First

npm install background-wave-transition

Base

import WaveTransition from 'background-wave-transition';

const transition = new WaveTransition({
  element: document.getElementById('container'),
  width: 1280,
  height: 800,
  textures: [
    '/background-wave-transition/images/kon-min.jpeg',
    '/background-wave-transition/images/kon2-min.png',
    '/background-wave-transition/images/kon3-min.jpeg'
  ],
  animationOptions: {}
});

Methods

  // jump to index
  transition.goto(index: number);

  // go to prev
  transition.goPrev();

  // go to next
  transition.goNext();

  // resize
  transition.resize(width: number, height: number);

  // destroy
  transition.destroy();

Params

attribute defaultValue description
element none target element
width document.body.clientWidth canvas width
height window.innerHeight canvas height
textures [] background image array
onAnimationStart () => {} trigger when animation start
onAnimationEnd () => {} trigger when animation end
onLoadComplete () => {} trigger when textures loaded
animationOptions.duration 2 animation duration
animationOptions.initialTime 1 first shockwave's time
animationOptions.timePulse 0.02 shockwave's time increase per frame
animationOptions.initialAmplitude 30 shockwave's amplitude
animationOptions.amplitudePulse 0.6 shockwave's amplitude decrease per frame
animationOptions.alphaPulse 0.01 layer's alpha change per frame
animationOptions.wavelength 300 shockwave's wavelength
animationOptions.waveCount 3 shockwave count
animationOptions.radius 2000 shockwave's radius

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.