我试图在div可见时触发从After Effects导出的动画。这是组件的代码：

import React,{ Component,useRef } from "react";
import Lottie from "react-lottie";
import animationData from "./microscopioseis.json";
import "./App.scss";

function microscopio () {
  const wrapper = useRef(null);
  const defaultOptions = {
      loop: false,autoplay: true,animationData: animationData,rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
        },};




  return (
      <div classname="Uncontrolled microscopio" ref={wrapper}>
        <h1>Lottie</h1>
        <p>Base animation free from external manipulation</p>
        <Lottie options={defaultOptions} height={600} width={800} />
      </div>
    );
  };


export default microscopio;

这是index.html中的代码，当div相交时，该代码会触发“ anim1” KeyFrames动画。我想用bodymovin动画代替它。

const microscopio = document.querySelector('.microscopio');
    observer = new IntersectionObserver((entries) => {
        console.log(entries);

        if(entries[0].intersectionRatio > 0) {
          entries[0].target.style.animation = 'anim1 2s forwards ease-out';
        }
        else {
          entries[0].target.style.animation = 'none';
        }
    })

    observer.observe(microscopio)