使用 react.js 滚动动画

Question

I am using some css animations from animate.css and I'm using react.js which works fine at the top of my page however, I also have some animations near the middle of the page. When my page loads everything animates at once which means once I scroll down the animations in the middle of the page have already completed. I am looking for away to delay the animations until that area of the screen is visible. I have found some questions/answers on here but they date back quite a few years and appear to be outdated.

As seen in the code below the animate__animated animate__bounce animate__zoomInDown classes are derived from animate.css but play immediately when the page is loaded and not when visible onscreen:

import React from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHourglassStart} from '@fortawesome/free-solid-svg-icons'



function MiddleContainer() {
  return (
    <div>
    <div id = "middle-container" class="middle-container">
      <h1>What can I offer you?</h1>
      <div className = "fast animate__animated animate__bounce animate__zoomInDown">
      <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;

Answer 1

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;