スクロールに合わせてfadeInしたいですが、ブラウザが開かれたタイミングでfadeInされてしまいます。

コンソールにエラーはでておりません。  
fadeInの動きはできているので、問題なく読み込みされてるかと思うのですが  
fadeInのタイミングだけスクロールにあって動きません。  
初歩的な質問で恐縮ですが、よろしくお願い致します。

```

    <div class="test"></div>
                <ul>
                    <li class="animate__animated fadeInUp animate__fadeInUp">
                        <div class="step-number">STEP1<p>テキストテキストテキスト</p>
                        </div>
                    </li>
                    <li class="animate__animated fadeInUp animate__fadeInUp">
                        <div class="step-number">STEP2<p>テキストテキストテキスト</p>
                        </div>
                    </li>
                    <li class="animate__animated fadeInUp animate__fadeInUp">
                        <div class="step-number">STEP3<p>テキストテキストテキスト</p>
                        </div>
                    </li>
                </ul>
    
    .animate__animated{
      opacity: 0;
    }
    
    /*アニメーションしたい要素の上に高さを入れてます*/
        .test{
          height: 50rem;
          width: 5rem;
          background-color: aqua;
        }
    
    $('.animate__animated').waypoint({
        handler: function(direction) {
          if (direction === 'down') {
            $(this.element)
              .addClass('.animate__fadeInUp');
          }
        },
        offset: '50%',
      });
    
```
CC BY-SA 4.0
2023-08-29T06:57:20.870
96070
2023-08-29T08:06:58.197
2023-08-29T08:06:58.197
3060
59156
question
javascript html css
スクロールに合わせてfadeInしたいが、ブラウザが開かれたタイミングでfadeInされてしまう