Lazy load & Transition Images Using WebGL

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:

Lazy load & Transition Images Using WebGL

Download Details:

Author: stasilo

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/stasilo/react-gl-transition-image

License: MIT

You Might Be Interested In:

Add Comment