Description:
An easy-to-use React component that lazy-load images and applies seven fancy transition effects to them using WebGL.
How to use it:
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.
- blobbyTransition
- glitchTransition
- polkaTransition
- noiseSwirlsTransition
- blurTransition
- waterTransition
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
