Spring4.js

import React from "react";
import { useSpring, animated } from "react-spring";

const FadeFromTopAndcounter = () => {
  const fadeFromtop = useSpring({
    to: { opacity: 1, marginTop: 0 },
    from: { opacity: 0, marginTop: -5000 },
    delay: "2000"
  });
  const counter = useSpring({
    number: 1,
    from: { number: 0 },
    delay: "2700"
  });

  return (
    <animated.div style={fadeFromtop}>
      <div style={c2style}>
        <div style={title}>Hi im fade in from margin top</div>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat nu
          mquam, nulla nostrum, offic
          </p>
      <animated.div >{counter.number}</animated.div>
      </div>
    </animated.div>

  );
}

const c2style = {
  background: "#F9CE21",
  height: "300px",
  display: 'flex',
  justifyContent:'center',
  alignItems:'center',
  flexDirection:'column'
};
const title ={
  fontWeight:'bold',
  fontSize:'50px'
}

export default FadeFromTopAndcounter;