StaticImage

 import React, { useEffect, useRef } from "react"

import { StaticImage } from "gatsby-plugin-image"
import { gsap } from 'gsap';

export default function Hero() {

  let logo = useRef(null);

  useEffect(() => {
    let tl = gsap.timeline({ defaults: {opacity: 0, delay: 0.5} });
    tl.from(logo.current, {x:-100});  
  })

  return (
    <main>
      <div ref={logo}>
        <StaticImage
           src="../images/logo.png"
           width={500}
           alt="Hero Image"
         />
      </div>
    </main>
  )
}

How to insert bootstrap.js to react app?

 https://stackoverflow.com/questions/43722322/how-to-insert-bootstrap-js-to-react-app

With Bootstrap version 5, you also need to install popper.js.

Install

npm i bootstrap@5.2.3 @popperjs/core

Use

// /src/index.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

StaticImage

  import React , { useEffect , useRef } from "react" import { StaticImage } from "gatsby-plugin-image" impor...