Final ImageReveal.js

ImageReveal.js

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 })
      await next({ coverWidth: 0, coverLeft: 100, imageScale: 1, imageOpacity: 1 })
    },
    config: config.default,
    onStart: () => set(false),
    onRest: () => setTimeout(() => set(true), 1000),
    reset
  })
  return (
    <>
      <animated.div className='cover' style={{
        background: 'lightblue',
        height: '100%',
        position: 'absolute',
        width: coverWidth.interpolate(width => `${width}%`),
        left: coverLeft.interpolate(left => `${left}%`)
      }}>
      </animated.div>
      <animated.div className='image' style={{
        background: 'lightgreen',
        height: '100%',
        width: '100%',
        transform: imageScale.interpolate(scale => `scale(${scale})`),
        opacity: imageOpacity
      }}></animated.div>
    </>
  )
}

export default ImageReveal