ローディング画面終了後、ScrollRevealが効かない（画面幅のリサイズを行うと効く）

前提・実現したいこと

ローディング画面終了後、画面幅をリサイズしないでも、ScrollRevealが効くようにしたい。

発生している問題・エラーメッセージ

ScrollReveal.jsを用いて、アニメーションを実装していたのですが、
ローディング画面を実装後、うまく効かなくなってしまいました…

画面幅をリサイズすると表示されるのですが、改善方法が分からず悩んでおります。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        main div {
            width: 100px;
            height: 100px;
            background-color: #000;
        }

        .hidden {
            display: none;
        }

        #showloading {
            font-size: 120px;
            font-weight: bold;
            line-height: 100vh;
            text-align: center;
            position: relative;
        }


    </style>
</head>
<body>
    <p id="showloading">
        <span class="top">abc</span> <span class="top_1">1234</span>
    </p>

    <main id="main" class="hidden">
        <div class="left"></div>
    </main>
</body>


<script src="https://unpkg.com/scrollreveal"></script>
<script>
    ScrollReveal().reveal('.top', {
        duration: 2400,
        origin: 'top',
        distance: '300px',
        reset: false,
        delay:300
    });

    ScrollReveal().reveal('.top_1', {
        duration: 2400,
        origin: 'top',
        distance: '300px',
        reset: false,
        delay:900
    });

    ScrollReveal().reveal('.left', {
        duration: 1400,
        origin: 'left',
        distance: '300px',
        reset: false,
    });
</script>
<script>
    window.onload = function () {
  setTimeout(function () {
      var main = document.getElementById("main");
      var loading = document.getElementById("showloading");
      loading.style.display = "none";
      main.style.display = "block";
  }, 3000);
};
</script>
</html>