fadeinがfadeinscrollinに切り替わらない

この部分のfadeinだけ、fadein scrollinに切り替わりません。なぜでしょうか。
他はきちんとフェードインできます。ご教示お願い致します。
デベロッパーツールにて意図的に.fadein scrollinに変更したところ、問題なくフェードインしたのでおそらくjavascriptは問題なく読み込めているのだと思います。しかし、この後マーカーを引くアニメーションを追加しようとしたところそれも動作しませんでした。（こちらも意図的にクラス名を変更すると動作します）
どうしても原因がわからず困っています。ご教示お願い致します。

追記
いろいろやってみて、ぴたっと移動させるscroll-snapを指定するために設定していたheight: 100vh;が原因であることがわかりました。以下のhtmlのように、containerはページ全体を指定しています。このscroll-snapを維持したままfadeinscrollinを有効にすることはできないでしょうか。ご意見お願い致します。

css
1.container {
2    overflow: auto;
3    scroll-snap-type: y mandatory;
4    height: 100vh;
5}
6

html
1            <div class="container">
2                <section id="hero">
3                    <div class="fadein">
4                        <img src="../image/top/pc/logo-2.png" alt="">
5                    </div>
6                    <div class="caption">
7                        <p class="fadein">
8                            テキストテキスト
9                        </p>
10                    </div>
11                    
12                    <div class="scroll-bar">
13                        <div class="fadein">
14                            <a href="#about"><span></span>ABOUT</a>
15                        </div>
16                    </div>
17                </section>
18                
19                <section id="about">
20                    <div class="caption-about1">
21                        <h2 class="title"><span class="marker-animation">テキスト</span></h2>
22                        <p class="fadein">
23                            テキストテキスト</p>
24                    </div>
25                    <h2 class="title">テキスト<br class="new-line">テキスト</h2>
26                    <p>
27                        テキストテキスト
28                    </p>
29                    <div class="scroll-bar">
30                        <a href="#menu"><span></span>MENU</a>
31                    </div>
32                </section>
33                
34                <section id="menu">
35                    
36                </section>
37            </div>
38