Images Lazy-Load & Transition using WebGL

Description:

An easy-to-use React component that lazy-load images and applies seven fancy transition effects to them using WebGL.

01. Install and import the component.

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

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

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

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

03. Apply the transition effect to your images.

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

04. More default props.

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

Author: stasilo
Live Demo: Link
Download: Link
Official Website: Link
License: MIT