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