Lazy load & Transition Images Using WebGL

Description:

An easy-to-use React component that lazily loads images and applies 7 fancy transition effects to them using WebGL.

How to use it:

1. Install and import the component.

# NPM
$ npm i react-gl-transition-image --save

import React from 'react';
import ReactGlTransitionImage from 'react-gl-transition-image';

2. Or import a transition effect you wish to use.

• blobbyTransition
• glitchTransition
• polkaTransition
• noiseSwirlsTransition
• blurTransition
• waterTransition

import ReactGlTransitionImage, {
       blurTransition,
       waterTransition,
       // ...
} from 'react-gl-transition-image';

3. Apply the transition effect to your images.

<ReactGlTransitionImage
  ref={ref}
  src={src}
  progress={progress}
  transition={blurTransition}
/>

4. More default props.

className: '',
style: {},
onAssetsLoaded: () => {},
transition: blobbyTransition,
transitionAlpha: false,
textures: [],
mask: null,

Preview: