Images Lazy-Load & Transition using WebGL

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.

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 DemoLink

DownloadLink

Official WebsiteLink

License: MIT

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.

SKYPE | FACEBOOK | LINKEDIN | TWITTER | EMAIL

Leave a Comment

Your email address will not be published. Required fields are marked *