javascriptで二段階アニメーションを付けたい

ここに解決したい内容を記載してください。

「left to right」を二段階アニメーションを付けたい

https://tympanus.net/Development/BlockRevealers/
↑完成図のイメージサイト

発生している問題・エラー

出ているエラーメッセージを入力
Uncaught SyntaxError: Unexpected token '<' (at anime.min.js:8:1)
scrollMonitor.js:4 Uncaught SyntaxError: Unexpected token '<' (at scrollMonitor.js:4:1)
main.js:8 Uncaught SyntaxError: Unexpected token '<' (at main.js:8:1)
↑このエラーはhttps://tympanus.net/codrops/2016/12/21/block-reveal-effects/
のサイトから順次に沿ってファイルをダウンロードしております
※最初からエラーが出ていた

script.js:7 Uncaught ReferenceError: scrollMonitor is not defined
at index01 (script.js:7:13)

該当するソースコード

<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>SimBa Official Site</title>
        <link rel="icon" href="icon.jpg">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
     
 <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Profile</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css"> -->
  </head>

  <body>
    <header id="header" class="wrapper">
      <h1 class="site-title"><a href="index.html"><img src="nekonekoneko.png" alt="Profile"></a></h1>
      <nav>
        <nav>
            <ul>
              <li><a href="#Home">Home</a></li>
              <li><a href="#Profile">Profile</a></li>
              <li><a href="#Contact">Contact</a></li>
            </ul>
          </nav>
      </nav>
    </header>

    <main>
      <div id="mainvisual">
        <img src="12345.jpg" alt="テキストテキストテキスト">
      </div>

      <section id="about" class="headline">
        <h2 class="section-title">About</h2>
        <div class="content">
          <img src="nekoneko.jpg" >
          <div class="text">
            <h3 class="content-title">SimBa</h3>
            <p>
              <a>プロフィールはこちら</a><br>
              
              
            </p>
          </div>
        </div>
      </section>

      <section id="hobby" class="headline">
        <h2 id ="Profile" class="section-title">Profile</h2>
        <ul>
          <li>
            <img src="onair.png">
            <h3 class="content-title">知識のアップデート</h3>
            <p><a>読書。SNSで「アウトプット」をしています。</a></p>
            
          </li>
          <li>
            <!-- <img src="img/bicycle2.jpg" alt="テキストテキストテキスト"> -->
            <!-- <h3 class="content-title">タイトルタイトル</h3>
            <p>テキストテキストテキスト</p>
          </li> -->
          <li>
            <img src="ryori.png" alt="テキストテキストテキスト">
            <h3 class="content-title">料理</h3>
            <p>人生100年時代。あなたは自分の体に気を遣ってますか？体の健康を維持するため「アンチエイジング」のために料理
            をしています。</span>
            </p>
            
             <!-- js 編集 -->
            <section>  
              <h2><span id="index01">left to right</span></h2>
            </section>
          </li>
        </ul>
      </section>
    </main>
 <div class="contact-bg">
                <div class="contact-area inner">
                    <p id ="Contact"class="contact-message">Contact<br>                        
         
                    <div class="contact-inner">
                        <form method="post">
                            <table class="contact-table">
         
         
         
                                <tr class="table-list">
                                    <th>
                                        <label for="name">お名前<span class="essential">必須</span></label>
                                    </th>
                                    <td>
                                        <input type="text" name="yourname" id="name"  class="input-area" autocomplete="name">
                                    </td>
                                </tr>
         
         
         
                                <tr class="table-list">
                                    <th><label for="furigana">ふりがな<span class="essential">必須</span></label></th>
                                    <td>
                                        <input type="text" name="yourname" id="furigana"  class="input-area">
                                    </td>
                                </tr>
         
                                <tr class="table-list">
                                    <th><label for="mail">メールアドレス<span class="essential">必須</span></label></th>
                                    <td>
                                        <input id="mail" type="email" name="mail"  class="input-area" autocomplete="email">
                                    </td>
                                </tr>
         
         
         
                                <tr class="table-list">
                                    <th><label for="comment">お問い合わせ内容<span class="essential">必須</span></label></th>
                                    <td>
                                        <textarea id="comment" name="comment"></textarea>
                                    </td>
                                </tr>
         
                            </table>
                        </form>
         
         
         
                        <input type="submit" value="送信する" class="button">
         
         
                    </div>
                </div>
            </div>

               <footer id="footer">
                <p>&copy; 2022 Profile</p>
              </footer>
        </div>

    <!-- javasc 編集 -->
        <script src="script.js"></script>
        <script src="anime.min.js"></script>
        <script src="scrollMonitor.js"></script>
        <script src="main.js"></script>
    </body>
</html>

script.js

JavaScript
1//script.js内のコードのみを張り付け
2
3JavaScript
4(function() {
5    setTimeout(index01, 10);
6      function index01() {
7
8        let scrollElemToWatch_1 = document.getElementById('index01') //指定
9            watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -10), 
10            rev1 = new RevealFx(scrollElemToWatch_1, {
11                revealSettings : {
12                    bgcolor :'#FFCC33',
13                    duration: 300, 
14                    // direction:'rl',
15
16                    onStart: function(contentEl, revealerEl){
17                        anime.remove(contentEl);
18                        contentEl.style.opacity = 0;
19                    },
20                    onCover: function(contentEl, revealerEl){
21                        contentEl.style.opacity = 1;
22                        anime ({
23                            targets : contentEl,
24                            // duration : 100, 
25                            // delay:10, 
26                            easing: 'easeOutExpo',
27                            // opacity:[0,1]
28                        });
29                    }
30                }
31            })
32            watcher_1.enterViewport(function() {
33                rev1.reveal();
34                    watcher_1.destroy();
35            });
36      }
37})();
38

自分で試したこと
デバック確認
スペル確認
https://oku-log.com/blog/scroll-effect/
https://idol-plus.net/2020/10/07/block-reveal-effects/
を使って改善を試みた

m.ts10806

2022/09/08 01:44

anime.min.jsはどこから取得したものでしょうか。マークダウンのcodeが途中で切れたりしてるので何とも言えませんが（質問編集して調整を）、提示のJavaScriptはどのファイルでしょうか。

yambejp

2022/09/08 01:52

完成画面はわかりましたが、結局どこの部分を「二段階アニメ」と言っているのでしょうか？ →四角が上下する →画面が切り替わってマスクされた文字が表示されるという二段階？切り替わるトリガーは何でしょうか？なにか読み込みをまっている間四角を上下させる？読み込みがおそいときはずっと上下する？

SimBa_Lab

2022/09/08 05:16

ありがとうございます完成画面はわかりましたが、結局どこの部分を「二段階アニメ」と言っているのでしょうか？ ↑ https://tympanus.net/Development/BlockRevealers/ 自己課せられた制限事項のブロックの動き「left to right」につける anime.min.jsはどこから取得したものでしょうか。 ↑ https://github.com/codrops/BlockRevealers/tree/master/js こちらからです提示のJavaScriptはどのファイルでしょうか。 ↑ 自分で作ったものです

m.ts10806

2022/09/08 05:23

質問は編集できるので適宜追記を。 >>提示のJavaScriptはどのファイルでしょうか。 >自分で作ったものですいえ、複数ファイルがあるので、どのファイルが提示のコードの記述があるのかということを聞いています。

m.ts10806

2022/09/08 06:17

いえ、違います。質問本文に提示されているコードはどのファイルに記述されたコードなのかということで、ファイル名を明示してください。 HTMLを見たところ、.jsは4つあります。ファイル名だけは如何様にもできるので、自身が組んだものとそうでないものは明記してください。そうでないものは取得先を明示。バージョンもです。回答者側の手元で再現確認する際には必要です。

SimBa_Lab

2022/09/08 06:56

m.ts10806

2022/09/08 07:02 編集

質問本文に明記を。今のままだと、そのscript.jsすらもどこからどこまで含まれているか赤の他人には分かりません。例ファイル名 ```言語名コード ``` ファイル名 ```言語名コード ```

m.ts10806

2022/09/08 08:18

できてないと思います。マークダウンのcodeについては正しく使えるようになる必要がありますので、ヘルプページや以下など参考にしてください。 https://teratail.com/questions/238564 PCなら右側にプレビュー出てるので確認しながら調整してくださいね。 script.jsだけならこう。 script.js ```JavaScript //script.js内のコードのみを張り付け ``` ↑ ```(バッククォート3つ）で囲みます。

SimBa_Lab

2022/09/09 00:03

修正しました

m.ts10806

2022/09/09 00:05

PCなら右側にプレビュー出てるので確認しながら調整してくださいね。

行動規範の内容に同意します

回答1件

ベストアンサー

定義の読み込みが先です。

HTML
1        <script src="script.js"></script>
2        <script src="anime.min.js"></script>
3        <script src="scrollMonitor.js"></script>
4

↓

HTML
1        <script src="anime.min.js"></script>
2        <script src="scrollMonitor.js"></script>
3        <script src="script.js"></script>
4

anime.min.jsやscrollMonitor.jsの機能を利用するなら、それらの後に。
※main.jsの内容次第ではまた順番は変わりますが、「定義の読み込みが先」という大前提は変わりません。

投稿2022/09/09 01:38

m.ts10806

総合スコア80850

SimBa_Lab

2022/09/09 03:15

ありがとうございます編集しましたが変化ありません

m.ts10806

2022/09/09 03:16

Uncaught ReferenceError: scrollMonitor is not defined ↑上記は解決しそうですが、如何でしょうか。

SimBa_Lab

2022/09/09 06:00

編集しましたが変化なしです

m.ts10806

2022/09/09 06:15

ひとまず外部から取得したものを自身のサーバに配置するのではなく一通りCDNに変更するようすすめます。問題切り分けにもなります。 anime.min.jsなら以下とか（バージョンは同じものにしてくださいね。） https://cdnjs.com/libraries/animejs scrollMonitor.jsやmain.jsについては内容や取得先がないので調べてください。

SimBa_Lab

2022/09/10 02:09

ありがとうございます CDNをしましたが改善がなかったために他の方法でやりたいと思います

行動規範の内容に同意します