Reveal.js

import { useState, setState, useRef } from "react";
import Observer from "@researchgate/react-intersection-observer";
import anime from "animejs";

import { ANIMATIONS } from "constants";

function handleIntersection(event, ref, delay, callback) {
  if (event.isIntersecting) {
    callback();
    anime.set(ref, { opacity: 0 });
    anime({
      targets: ref,
      opacity: [0, 1],
      translateY: [25, 0],
      duration: ANIMATIONS.DURATION,
      easing: ANIMATIONS.EASING,
      delay: delay || 0
    });
  }
}

const RevealAnimation = ({ children, delay }) => {
  const [animationState, setAnimationState] = useState(false);
  const containerRef = useRef(null);
  const options = {
    onChange: event =>
      handleIntersection(event, containerRef.current, delay, () => {
        setAnimationState(true);
      }),
    disabled: animationState,
    rootMargin: "0% 0% -10%"
  };
  return (
    <Observer {...options}>
      <div ref={containerRef} style={{ opacity: 0 }}>
        {children}
      </div>
    </Observer>
  );
};
export default RevealAnimation;