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