ページ遷移jQueryプラグインAnimsitionで、遷移時一瞬ちらつきがあるのを治したいです。

前提・実現したいこと

ページ遷移のアニメーションをする、jQueryプラグインのAnimsitionを使っています。
ページ遷移時、画面が一瞬背景が見えることなく、アニメーションするようにしたいです。
現在は、ローカル環境で、テスト中です。
Animsition　GitHub
(すみません、コピペで見れるようにしたかったのですが、全てのダウンロードデータをこちらに記載するとすごい量になってしまいましたので、自分の方で記載している部分を、下のコードに書きました)

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

一瞬見えてるのは何が見えてるんだろうと思い、いろいろ、色をつけてみたところ
↓このブラウザの背景が、見えていました。

エラーメッセージは「応答を受信する前にメッセージポートが閉じました。」というものが一つあります。
しかしこれは、基本的にはローカル環境下での事象なので気にならなければ放置で良いというものでした。

起こっている問題を図に表すと下記のような感じです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4
5     <!--- 基本情報
6    ================================================== -->
7    <meta charset="UTF-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>TITLE</title>
10
11    <!--- CSS
12    ================================================== -->
13    <!-- originalCSS -->   
14    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
15    <!-- animsition -->
16    <link rel="stylesheet" href="css/animsition.min.css">
17   
18    <!-- script
19    ================================================== -->
20    <!-- JQuery -->    
21    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
22    <!-- animsition -->
23    <script src="js/animsition.min.js"></script>
24
25    <body>
26        <!-- 該当の、全体のページ遷移プラグイン
27        ================================================== -->
28        <div
29        class="my animsition-overlay"
30        data-animsition-overlay="true"
31        data-animsition-in-class="overlay-slide-in-right"
32        data-animsition-in-duration="1000"
33        data-animsition-out-class="overlay-slide-out-right"
34        data-animsition-out-duration="800"
35        >
36
37animsition-linkというliタグをクリックすると、ページ遷移します。
38            <!-- header
39            ================================================== -->  
40            <header>
41                <nav class="global-navi">
42                    <div class="logo">
43                        <p>LOGO</p>
44                    </div>
45
46                        <div class="menu">
47                            <ul>
48                                <li class="li"><a href="index.html" class="animsition-link">TOP</a></li>
49                            </ul>
50                        </div>
51
52                </nav>
53            </header>
54
55            <main>
56            ここにサイトの内容です
57            </main>
58
59
60            <!-- footer
61            ================================================== -->
62            <footer>
63            フッターです
64            </footer>
65
66
67            <!-- Script
68            ================================================== -->
69            <!-- 共通 -->
70            <script type="text/javascript" src="js/index.js"></script>
71        </div><!-- end animsition-overlay -->
72    </body>
73
74</html>

JS
1/* グローバルメニューページ遷移アニメーション
2* -------------------------------------------------- */
3$(document).ready(function() {
4  $(".animsition-overlay").animsition({
5    inClass: 'overlay-slide-in-right',
6    outClass: 'overlay-slide-out-right',
7    inDuration: 1500,
8    outDuration: 800,
9    linkElement: '.animsition-link',
10    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
11    loading: false,
12    loadingParentElement: 'body', //animsition wrapper element
13    loadingClass: 'animsition-loading',
14    loadingInner: '', // e.g '<img src="loading.svg" />'
15    timeout: false,
16    timeoutCountdown: 5000,
17    onLoadEvent: true,
18    browser: [ 'animation-duration', '-webkit-animation-duration'],
19    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
20    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
21    overlay : true,
22    overlayClass : 'animsition-overlay-slide',
23    overlayParentElement : 'body',
24    transition: function(url){ window.location.href = url; }
25  });
26});
27

試したこと

テラテイル過去質問に、似たような質問がありました。
また、こちらの
参考サイト1
参考サイト2
も参考にいたしました。

しかし、JSを、理解して書いているわけではないので、もしかしたら下記は思い違いかもしれません

CSS
1.animsition-overlay{
2    display: none;
3}

* -------------------------------------------------- */
$(document).ready(function() {
  $('.animsition-overlay').fadeIn(0);
  $(".animsition-overlay").animsition({
    inClass: 'overlay-slide-in-right',
    outClass: 'overlay-slide-out-right',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: false,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : true,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});

HTML
1<script type="text/javascript">
2    $(window).load(function() {
3		$('.animsition-overlay').fadeIn(0); 
4    });
5</script>

該当のCSSに、display:none;を付けました。そして、JSでfadeIn(0)という設定をし、すぐに出てくるようにしてみました⇒失敗
Jqueryの読みこみを、CDNではなく、ダウンロードデータにし、最新を読みこみました。⇒失敗
他にも読みこんでいるプラグインがあるので、head内のAnimsitionデータのCSSを、メインのCSSの下に、JSの読み込み位置Jqueryのすぐ下に持ってきました。⇒失敗

HTML
1 <!--- CSS
2    ================================================== -->
3    <!-- originalCSS -->   
4    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
5ここに⇒      <!-- animsition -->
6        <link rel="stylesheet" href="css/animsition.min.css">
7    <!-- swiper -->
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css">
9    <!-- zoomslider -->
10    <link rel="stylesheet" href="js/dist/zoomslider.css">
11
12   
13    <!-- script
14    ================================================== -->
15    <!-- JQuery -->    
16    <script src="js/jquery-3.5.1.min.js"></script>
17ここに⇒  <!-- animsition -->
18      <script src="js/animsition.min.js"></script>
19    <!-- swiper -->
20    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
21    <!-- scrollreveal -->
22    <script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.3/scrollreveal.min.js"></script>
23    <script src="https://unpkg.com/scrollreveal"></script>