React-Reveal breaks in combination with React-Scroll

Question

I am working on a portfolio site with React.js as a self-learning project for my software engineering course. My goal is to make a heavily animated portfolio site.

I am currently experiencing a bug where the entire page freezes up for a bit when using a react-reveal animation on my photo in the about section (About.js component). However, the animation works just fine on the text directly next to the image.

The navbar (Navbar.js component) contains the react-scroll code which is just simple Link to the id of each section. One thing to note is that the animations also work fine if the user manually scrolls. I have also tried in a variety of browsers.

I thought that the issue might have been caused by having too many animations running at once, causing lag, but I tested multiple react-reveal animations together and it has no problem so long as there is no scroll taking place. I also tried delaying the animations, but that led to the same frozen results. I included a video of the problem and the project github linked below.

About.js

...
const About = () => {
  return (
    <>
      <div id='about' className='aboutSection'>
        <br />
        <div className='aboutBox'>
          <div className='aboutText'>
            <Fade left><h1>About Me</h1>
              <p>Placeholder for purposes of post</p>
            </Fade>
          </div>
          <div className='aboutPicture'>
            <Fade right><img src={headshot} id='headshot' /></Fade> {/*This fade is causing the issues*/}
          </div>
        </div>
      </div>
    </>
  )
}

Navbar.js

...

<div className='mainNav'>
    <ul>
        {/* <NavLink to='/' exact className='nav' style={{ textDecoration: 'none' }}> */}
        <li id='title'><Link to='top' smooth={true} ignoreCancelEvents><button className='navTitleText'>Mitchell Conrad</button></Link></li>
        {/* </NavLink> */}
        <li className='nav-item'><Link to='about' spy={true} smooth={true} ignoreCancelEvents><Button scrollButton={props.scrollNav}>  About  </Button></Link></li>
        <li className='nav-item'><Link to="projects" spy={true} smooth={true} ignoreCancelEvents><Button scrollButton={props.scrollNav}>  Projects  </Button></Link></li>
        <li className='nav-item'><Link to="resume" spy={true} smooth={true} ignoreCancelEvents><Button scrollButton={props.scrollNav}>  Resume  </Button></Link></li>
        <li id='contact' className='nav-item'><Button onClick={() => modalRef.current.open()}>  Contact  </Button></li>
    </ul>
</div>

...

Video of Issue

Full Project Github Link

I appreciate any advice/direction to take to work around this or fixes. Maybe I am missing something simple here, but I can't figure it out for the life of me.