スクロールに連動した(下からの)フェードイン

スクロールに連動して下からのフェードイン。(HTMLとCSSとjqueryで実装)
インターネットでの掲載サイトを参考にして実装しております。

### 発生している問題・エラーメッセージ
ページを読み込みした段階で全てのアニメーションが同時に実行されますが、その後、スクロールを進めていき、所定の位置にもいったにも関わらず、アニメーションが起こらず、連動部分がうまくいってない状況です。スクロールに連動したその他のアニメーションにおいてもこの現象が起こっております。cssについては念の為、アニメーション部分以外にも記載させて頂きました。
ファイル名はcss=test.css、jquery=main.jsで読み込みを行なっております。

### 該当のソースコード
```HTML
<html lang="ja">  
  <head>
        <meta charset="UTF-8">
        <title>test</title>
        <meta name="description" content="">
        <link rel="stylesheet" href="test.css">
  </head>
  
  <body>
     <main>
     <div id="concept">
         <div class="concept_img single-item u-fade-type-up js-scroll-trigger">
         </div>
         <div class="concept_text">
             <h2 id="concept_jump">CONCEPT</h2>
             <div class="CONCEPT_Message">
                 <div class="CONCEPT_MainMessage">test</div>
                 <p>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                 </p>
             </div>
         </div>
     </div>
     
     <div id="concept">
         <div class="concept_img single-item u-fade-type-up js-scroll-trigger">
         </div>
         <div class="concept_text">
             <h2 id="concept_jump">CONCEPT</h2>
             <div class="CONCEPT_Message">
                 <div class="CONCEPT_MainMessage">test</div>
                 <p>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                 </p>
             </div>
         </div>
     </div>
     
     <div id="concept">
         <div class="concept_img u-fade-type-up js-scroll-trigger">
         </div>
         <div class="concept_text">
             <h2 id="concept_jump">CONCEPT</h2>
             <div class="CONCEPT_Message">
                 <div class="CONCEPT_MainMessage">test</div>
                 <p>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                 </p>
             </div>
         </div>
     </div>
     
     <div id="concept">
         <div class="concept_img single-item u-fade-type-up js-scroll-trigger">
         </div>
         <div class="concept_text">
             <h2 id="concept_jump">CONCEPT</h2>
             <div class="CONCEPT_Message">
                 <div class="CONCEPT_MainMessage">test</div>
                 <p>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                     test...test...test...test...test...<br>
                 </p>
             </div>
         </div>
     </div>
      </main>
      
      <!--jpueryを使用するために記載-->
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script src="main.js"></script>
  </body>

CSS
1#concept{
2  width:100%;
3  max-width:100%;
4  position:relative;
5  margin-top:20px;
6}
7
8.concept_img{
9  width:60%;
10  margin-left:7%;
11  padding-top:100px;
12  background-color: pink;
13  height:400px;
14}
15
16.concept_text{
17  max-width:50%;
18  z-index: 1;
19  position:absolute;
20  bottom:5%;
21  right:7%;
22}
23
24.concept_text h2{
25  text-align: left;
26  font-size: 25px;
27  color: #000000;
28  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
29  padding:20px 0;
30}
31
32.CONCEPT_MainMessage{
33  font-size: 20px;
34  font-weight: 600;
35  line-height: 30px;
36  letter-spacing: 0.4em;
37  color: #000000;
38  padding:20px 0;
39}
40.concept_text p{
41  font-size: 15px;
42  line-height: 35px;
43  letter-spacing: 0.5em;
44  color: #000000;
45  padding:20px 0;
46}
47
48/* アニメーション前 */
49.u-fade-type-up{
50    transform: translateY(50px);
51    opacity: 0;
52}
53
54/* トリガー発火でis-activeを付与 */
55.u-fade-type-up.is-active{
56    transition: .6s;
57    transform: translateY(0);
58    opacity: 1;
59}

jquery
1$(function () {
2
3    // aimation呼び出し
4    if ($('.js-scroll-trigger').length) {
5        scrollAnimation();
6    }
7
8    // aimation関数
9    function scrollAnimation() {
10        $(window).scroll(function () {
11            $(".js-scroll-trigger").each(function () {
12                let position = $(this).offset().top,
13                    scroll = $(window).scrollTop(),
14                    windowHeight = $(window).height();
15
16                if (scroll > position - windowHeight + 200) {
17                    $(this).addClass('is-active');
18                }
19            });
20        });
21    }
22    $(window).trigger('scroll');
23
24});
25