{"id":5850,"date":"2020-11-17T13:13:00","date_gmt":"2020-11-17T13:13:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5850"},"modified":"2020-11-22T14:23:09","modified_gmt":"2020-11-22T14:23:09","slug":"images-lazy-load-transition-using-webgl","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/images-lazy-load-transition-using-webgl\/","title":{"rendered":"Images Lazy-Load &#038; Transition using WebGL"},"content":{"rendered":"\n<h2>Description:<\/h2>\n\n\n\n<p>An easy-to-use <strong>React <\/strong>component that lazy-load images and applies seven fancy transition effects to them using <strong>WebGL<\/strong>.<\/p>\n\n\n\n<h2>How to use it:<\/h2>\n\n\n\n<p>01. Install and import the component.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"># NPM\n$ npm i react-gl-transition-image --save<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';\nimport ReactGlTransitionImage from 'react-gl-transition-image';<\/pre>\n\n\n\n<p>02. Or import a transition effect you wish to use.<\/p>\n\n\n\n<ul><li>blobbyTransition<\/li><li>glitchTransition<\/li><li>polkaTransition<\/li><li>noiseSwirlsTransition<\/li><li>blurTransition<\/li><li>waterTransition<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">import ReactGlTransitionImage, {\n       blurTransition,\n       waterTransition,\n       \/\/ ...\n} from 'react-gl-transition-image';<\/pre>\n\n\n\n<p>03. Apply the transition effect to your images.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;ReactGlTransitionImage\n  ref={ref}\n  src={src}\n  progress={progress}\n  transition={blurTransition}\n\/&gt;<\/pre>\n\n\n\n<p>04. More default props.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">className: '',\nstyle: {},\nonAssetsLoaded: () =&gt; {},\ntransition: blobbyTransition,\ntransitionAlpha: false,\ntextures: [],\nmask: null,<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Author<\/strong>: stasilo<\/p><p><strong>Live Demo<\/strong>:\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/stasilo.github.io\/react-gl-transition-image\/example\/build\/\" target=\"_blank\">Link<\/a><\/p><p><strong>Download<\/strong>:\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/stasilo\/react-gl-transition-image\/archive\/master.zip\" target=\"_blank\">Link<\/a><\/p><p><strong>Official Website<\/strong>:\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/stasilo\/react-gl-transition-image\" target=\"_blank\">Link<\/a><\/p><p><strong>License<\/strong>: MIT<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8211;save import React from &#8216;react&#8217;; import ReactGlTransitionImage from &#8216;react-gl-transition-image&#8217;; 02. Or import a transition effect you wish to use. blobbyTransition glitchTransition [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145],"tags":[25,146,90,133,226,17],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/11\/Images-Lazy-Load-And-Transition-Using-React.gif","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1wm","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5850"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5850"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5850\/revisions"}],"predecessor-version":[{"id":5852,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5850\/revisions\/5852"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5851"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}