A parallax background component for use with Gatsby Image and GreenSock ScrollTrigger.

ParallaxBG.js

import React, {useEffect, useRef} from 'react'
import {gsap} from 'gsap'
import {ScrollTrigger} from 'gsap/ScrollTrigger'
import Img from 'gatsby-image'

gsap.registerPlugin(ScrollTrigger)

const ParallaxBG = (props) => {

  const bgRef = useRef(null)
  const containerRef = useRef(null)

  useEffect(() => {
    gsap.fromTo(bgRef.current, {
      top: window.innerHeight / 2,
    }, {
      top: -window.innerHeight / 2,
      ease: 'none',
      scrollTrigger: {
        trigger: containerRef.current,
        scrub: true,
        markers: props.markers,
      },
    })
  }, [])

  return (
    <div ref={containerRef} {...props}>
      {/* The gsap animation works on an element's `style` attribute. */}
      {/* Since the <Img/> element doesn't have a `style` attribute, we need to wrap it with this div. */}
      <div
        ref={bgRef}
        style={{
          position: 'fixed',
          top: 0,
          height: '100vh',
          width: '100%',
          zIndex: -1,
        }}
      >
        <Img
          fluid={props.fluid}
          alt='nice'
          style={{
            height: '100%',
            width: '100%',
            objectFit: 'cover',
          }}
        />
      </div>
      {props.children}
    </div>
  )
}

export default ParallaxBG