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

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(() => {
          // duration : 5000
      }, []);
      return (
        <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>
    export default MiddleContainer;

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top