How to use the framer-motion.useAnimation function in framer-motion

const App = () => {
  const controls = useAnimation();
  const footer = useAnimation();
  const results = useAnimation();
  const loadingAnimation = useAnimation();
  const classes = useStyles();
  const [state, dispatch] = useReducer(submitReducer, initialState);
  const [blockNumber, setBlockNumber] = useState('');
  const [invalidInput, setInvalidInput] = useState(false);
  const [gasUsed, setGasUsed] = useState('');
  const [feesPaid, setFeesPaid] = useState('');
  const [values, setValues] = useState({
    ethAddress: '',
    lowerBound: '',
    upperBound: '',
  });

  const handleSubmit = () => {
    if (
      /^(0x)+[0-9a-fA-F]{40}$/i.test(values.ethAddress) &&

const App = () => {
  const controls = useAnimation();
  const footer = useAnimation();
  const results = useAnimation();
  const loadingAnimation = useAnimation();
  const classes = useStyles();
  const [state, dispatch] = useReducer(submitReducer, initialState);
  const [blockNumber, setBlockNumber] = useState('');
  const [invalidInput, setInvalidInput] = useState(false);
  const [gasUsed, setGasUsed] = useState('');
  const [feesPaid, setFeesPaid] = useState('');
  const [values, setValues] = useState({
    ethAddress: '',
    lowerBound: '',
    upperBound: '',
  });

  const handleSubmit = () => {
    if (
      /^(0x)+[0-9a-fA-F]{40}$/i.test(values.ethAddress) &&
      Number(values.lowerBound) < Number(values.upperBound) &&

const WaveContainer = ({ fill, children }) => {
  const [wave, nextWave] = usePath(wavePaths, 0)
  const [ref, inView] = useInView({ threshold: 0 })
  const controls = useAnimation()

  useEffect(() => {
    if (inView) {
      controls.start({
        d: wave,
      })
    } else {
      controls.stop()
    }
  }, [wave, inView, controls])

  return (

export default () => {
  const context = useDocusaurusContext()
  const baseUrl = useBaseUrl() || ''
  const { siteConfig = {} } = context

  const info = useAnimation()
  const app = useAnimation()
  const queries = useAnimation()
  const arrow = useAnimation()
  const features = useAnimation()

  React.useEffect(() => {
    ;(async () => {
      await delay(200)

      await info.start('visible')

      app.start('visible')
      await delay(500)

      arrow.start('visible')
      await delay(1200)
      await queries.start('visible')
      await features.start('visible')
    })()

export default () => {
  const context = useDocusaurusContext()
  const baseUrl = useBaseUrl() || ''
  const { siteConfig = {} } = context

  const info = useAnimation()
  const app = useAnimation()
  const queries = useAnimation()
  const arrow = useAnimation()
  const features = useAnimation()

  React.useEffect(() => {
    ;(async () => {
      await delay(200)

      await info.start('visible')

      app.start('visible')
      await delay(500)

      arrow.start('visible')
      await delay(1200)
      await queries.start('visible')
      await features.start('visible')
    })()
  }, [])

export default () => {
  const context = useDocusaurusContext()
  const baseUrl = useBaseUrl() || ''
  const { siteConfig = {} } = context

  const info = useAnimation()
  const app = useAnimation()
  const queries = useAnimation()
  const arrow = useAnimation()
  const features = useAnimation()

  React.useEffect(() => {
    ;(async () => {
      await delay(200)

      await info.start('visible')

      app.start('visible')
      await delay(500)

      arrow.start('visible')
      await delay(1200)
      await queries.start('visible')

const Blob = ({ transform, fill, children }) => {
  const startIndex = useMemo(
    () => Math.floor(Math.random() * blobPaths.length),
    []
  )
  const [uuid] = useState(uuid4())
  const [blob, nextBlob] = usePath(blobPaths, startIndex)
  const [ref, inView] = useInView({ threshold: 0 })
  const controls = useAnimation()

  useEffect(() => {
    if (inView) {
      controls.start({
        d: blob,
      })
    } else {
      controls.stop()
    }
  }, [blob, inView, controls])

  return (
    
      {children}

const App = () => {
  const controls = useAnimation();
  const footer = useAnimation();
  const results = useAnimation();
  const loadingAnimation = useAnimation();
  const classes = useStyles();
  const [state, dispatch] = useReducer(submitReducer, initialState);
  const [blockNumber, setBlockNumber] = useState('');
  const [invalidInput, setInvalidInput] = useState(false);
  const [gasUsed, setGasUsed] = useState('');
  const [feesPaid, setFeesPaid] = useState('');
  const [values, setValues] = useState({
    ethAddress: '',
    lowerBound: '',
    upperBound: '',
  });

  const handleSubmit = () => {
    if (

export default () => {
  const context = useDocusaurusContext()
  const baseUrl = useBaseUrl() || ''
  const { siteConfig = {} } = context

  const info = useAnimation()
  const app = useAnimation()
  const queries = useAnimation()
  const arrow = useAnimation()
  const features = useAnimation()

  React.useEffect(() => {
    ;(async () => {
      await delay(200)

      await info.start('visible')

      app.start('visible')
      await delay(500)

      arrow.start('visible')
      await delay(1200)
      await queries.start('visible')
      await features.start('visible')

export default () => {
  const context = useDocusaurusContext()
  const baseUrl = useBaseUrl() || ''
  const { siteConfig = {} } = context

  const info = useAnimation()
  const app = useAnimation()
  const queries = useAnimation()
  const arrow = useAnimation()
  const features = useAnimation()

  React.useEffect(() => {
    ;(async () => {
      await delay(200)

      await info.start('visible')

      app.start('visible')
      await delay(500)

      arrow.start('visible')
      await delay(1200)