Animate on scroll using react.js

So I was able to solve this myself using a different library as I couldn’t find any documentation from animate.css on how to animate on scroll

The new library with documentation that worked is AOS from https://michalsnik.github.io/aos/

I had to use useEffect from react.js in order for it to work.

Here is my code with animate on scroll working:

import React, { useEffect } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHourglassStart} from '@fortawesome/free-solid-svg-icons'
import AOS from "aos";
import "aos/dist/aos.css";



    function MiddleContainer() {

      useEffect(() => {
        AOS.init({
          // duration : 5000
        });
      }, []);
      return (
    
        
        
        <div>
        <div id = "middle-container" class="middle-container">
          <h1>What can I offer you?</h1>
          <div className = "fast" data-aos="zoom-in">
          <FontAwesomeIcon className="social-icon" icon={faHourglassStart} size = '4x' 
           color = "black"/>
          <h4>Fast and Reliable Service</h4>
          <p>Your product will be delivered to you with precision, care and in a 
           timely manner.</p>
          <p>Add more info here when you are done with the css. </p>
          </div>
    
          
        </div>
    </div>
      )
    }
    
    export default MiddleContainer;