第一次滑动进入可视化区域时再运行动画效果

（1） 问题遇到的现象和发生背景
使用webstorm开发react项目，实现官网的动效。
长屏滚动，中间有一页需要是：第一次滑动进入可视化区域时再运行动画效果。
（在网上找了挺多纯js的但是都没有解决，因为是中途加入项目组，有些代码结构不好改动）
（也试过一些动画效果库，还是不行）

（2） 问题相关代码，请勿粘贴截图
Home2.tsx文件：

import React, { ReactChild, ReactFragment, ReactPortal, useEffect, useState } from "react";
import {BaseBlock} from "../common/BaseBlock";
import {Banner} from "../components/mainPage/Banner";
import 'animate.css';

export function Home2() {

const data = {
    title: "02_Home2",
    items: [{
        //略
    }]
};

const webContent = <div>
        <div className="content">
                <div className={"left"}>
                    <div className={"frame1"}>
                        <img className={"img1"} src={data.items[0].img}/>
                    div>
                    <div className={"name1"}>{data.items[0].name}div>
                    <div className={"desc1"}>{data.items[0].desc}div>
                div>
            <div className={"middle"}>
                <div className={"frame2"}>
                    <img className={"img2"} src={data.items[1].img}/>
                div>
                <div className={"name2"}>{data.items[1].name}div>
                <div className={"desc2"}>{data.items[1].desc}div>
            div>
            <div className={"right"}>
                <div className={"frame3"}>
                    <img className={"img3"} src={data.items[2].img}/>
                div>
                <div className={"name3"}>{data.items[2].name}div>
                <div className={"desc3"}>{data.items[2].desc}div>
            div>
        div>
div>

return <BaseBlock name={"Home2"} webContent={webContent}/>

}

Home2.blockName = "Home2"

（3） 我的解答思路和尝试过的方法
尝试过想用scroll判断是否进入可视化区域，但是又想到如果往回滑动那动画岂不是还要再执行一次？而且我也用了
let content=document.getElementById("content");
console.log(content.getBoundingClientRect().top)
会报错：
Consider adding an error boundary to your tree to customize error handling behavior.
Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
这个网上的解法也没解决
或者用了
var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop;
console.log("scrollTop:",scrollTop)
这种情况scrollTop还是一直为0

（4） 我想要达到的结果
能不能判断一下是否是 首次滑动 或 刷新 进入特定页面，然后再在判定是里面添加执行的动画类

用一个变量flag标识一下 。监听滑动 。只要滑动 就 给其 设置 true 默认 为false 然后 判断 这个 。其实就是加个锁
if（flag）{
//添加动画
}

至于刷新 ，刷新玩 flag默认就是 false了不用管

效果参考：https://www.bogdalegends.com/
里面的：12、15、46三个圆
（图片发不上来）

2022.7.28 找到了一个很适用的插件：react-reveal
直接用就可以实现 第一次滑动进入可视化区域时再运行动画效果
（泪目了，之前一直没想到这个插件）