akshay-nm

var httpRequest = new XMLHttpRequest()
    
httpRequest.open('GET', this.url, true)
httpRequest.timeout = 2000;

httpRequest.onload = function() {
  console.log('Content value received from request:', JSON.stringify(JSON.parse(httpRequest.responseText).content))
  // purpose of adding a timeout here is just to mimic a limited bandwidth scenario...
  setTimeout(() => {
    document.querySelector('container-ce').content = JSON.stringify(JSON.parse(httpRequest.responseText).content)

akshay-nm

var httpRequest = new XMLHttpRequest()
    
httpRequest.open('GET', this.url, true)
httpRequest.timeout = 2000;

httpRequest.onload = function() {
  console.log('Content value received from request:', JSON.stringify(JSON.parse(httpRequest.responseText).content))
  // purpose of adding a timeout here is just to mimic a limited bandwidth scenario...
  setTimeout(() => {
    document.querySelector('container-ce').content = JSON.stringify(JSON.parse(httpRequest.responseText).content)

akshay-nm

var httpRequest = new XMLHttpRequest()
    
httpRequest.open('GET', url, true)
httpRequest.timeout = 2000;

httpRequest.onload = function() {
  console.log('Content value received from request:', JSON.stringify(JSON.parse(httpRequest.responseText).content))
  // purpose of adding a timeout here is just to mimic a limited bandwidth scenario...
  setTimeout(() => {
    document.querySelector('container-ce').content = JSON.stringify(JSON.parse(httpRequest.responseText).content)

akshay-nm

import React from 'react'

const ImageRevealer = () => {
  return (
    <div></div>
  )
}

export default ImageRevealer

akshay-nm

<div className='container'>
  <div className='image-revealer'></div>
  <img/>
</div>

akshay-nm

States	Description
S1	Nothingness
S2	Our HTML structure is loaded on DOM for the first time. We don't have and image yet. This is where we start fetching our image and animate our revealer.
S3	Image load successful. We have the image. Its time to hide the revealer.
S4	Image load failed. I don't know what to do in this case, i'll leave it upto you...

akshay-nm

const props = useSpring({
    from: { left: '0%', top: '0%', width: '0%', height: '100%', background: 'lightgray' },
    to: async next => {
      while (!imageLoaded) {
        await next({ left: '0%', top: '0%', width: '100%', height: '100%', background: 'lightgray' })
        await next({ background: 'darkgray' })
      }
      next({ width: '0%', left: '100%' })
    }
})

akshay-nm

const props = useSpring({
  transform: 'scale(1)',
  from: { transform: 'scale(0.7)' }
})

akshay-nm

import React, { useState } from 'react'
import { useSpring, animated, config } from 'react-spring'
import './styles.css'

const ImageReveal = () => {
  const [reset, set] = useState(false)
  const { coverWidth, coverLeft, imageScale, imageOpacity } = useSpring({
    from: { coverWidth: 0, coverLeft: 0, imageScale: 0.5, imageOpacity: 0 },
    to: async next => {
      await next({ coverWidth: 100, coverLeft: 0, imageScale: 0.5, imageOpacity: 0 })

akshay-nm

.image {
  opacity: 0;
  transform: scale(0.5);
  width: 100%;
  height: 100%;
  position: absolute;
}

.cover {
  width: 0%;