Как воспроизвести анимацию lott ie на свитке с помощью Intersection Observer? - PullRequest
Новая
       47

Как воспроизвести анимацию lott ie на свитке с помощью Intersection Observer?

0 голосов
/ 30 марта 2020

Я пытаюсь вызвать анимацию, экспортированную из After Effects, когда div виден. Это код компонента: 

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;

Это код внутри индекса. html, который запускает анимацию ключевых кадров anim1 всякий раз, когда div пересекается. Я хочу заменить это анимацией 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)
...