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