GSAP スクロールマジック(ScrollMagic) とスクロールスナップ(scroll-snap)を併用したい

前提・実現したいこと

GSAPのスクロールマジック
https://greensock.com/gsap/
を用いてスクロールにしたがってアニメーションがされるサイトを作成しております。

その際に、アニメーションが表示される位置でピタッと止まるように
scroll-snapを利用したいのですが、うまくいかず解決方法を探しております。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>homePage</title>
7  <style>
8    .section {
9        height: 100vh;
10        width: 100%;
11        position: relative;
12        overflow-y: scroll;
13        overflow-x: hidden;
14   }
15
16    .section_bg {
17        height: 599vh;
18    }
19
20    .box01,
21    .box02,
22    .box03 {
23        position: absolute;
24        left: 50%;
25        width: 100%;
26        height: 100%;
27        transform: translate(-50%, 0%);
28        display: flex;
29        align-items: center;
30        justify-content: center;
31 }
32
33    .box01 {
34        background-color: red;
35        top: 0;
36    }
37
38    .box02 {
39        background-color: blue;
40        top: 200vh;
41    }
42
43    .box03 {
44        background-color: green;
45        top: 400vh;
46    }
47
48    .box01 p,
49    .box02 p,
50    .box03 p {
51        font-size: 2em;
52    }
53</style>
54</head>
55
56<body>
57  <section class="section">
58    <div class="box01" id="trig01">
59        <p>シーン1</p>
60    </div>
61    <div class="box02" id="trig02">
62        <p>シーン2</p>
63    </div>
64    <div class="box03" id="trig03">
65        <p>シーン3</p>
66    </div>
67　</section>
68　<div class="section_bg"></div>
69  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
70  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
71  <script src="./assets/js/ScrollMagic.min.js"></script>
72  <script src="./assets/js/animation.gsap.min.js"></script>
73  <script src="./assets/js/debug.addIndicators.min.js"></script>
74  <script>
75    var box1 = new TimelineMax();
76    var box2 = new TimelineMax();
77    var box3 = new TimelineMax();
78
79    box1
80        .set(".box01 p", {
81            autoAlpha: 1
82        })
83        .from(".box01 p", 2, {
84            autoAlpha: 0
85        })
86        .to(".box01 p", 2, {
87            autoAlpha: 1
88        });
89
90    var controller = new ScrollMagic.Controller();
91
92    var box1 = new ScrollMagic.Scene({
93            triggerElement: '#trig01',
94            triggerHook: 0,
95            duration: "200%"
96        })
97
98        .setTween(box1)
99        .setPin('#trig01')
100        .addIndicators()
101        .addTo(controller);
102
103
104    box2
105        .set(".box02 p", {
106            autoAlpha: 1
107        })
108        .from(".box02 p", 2, {
109            autoAlpha: 0
110        })
111        .to(".box02 p", 2, {
112            autoAlpha: 1
113        });
114
115    var controller = new ScrollMagic.Controller();
116
117    var box2 = new ScrollMagic.Scene({
118            triggerElement: '#trig02',
119            triggerHook: 0,
120            duration: "200%"
121        })
122
123        .setTween(box2)
124        .setPin('#trig02')
125        .addIndicators()
126        .addTo(controller);
127
128
129    box3
130        .set(".box03 p", {
131            autoAlpha: 1
132        })
133        .from(".box03 p", 2, {
134            autoAlpha: 0
135        })
136        .to(".box03 p", 2, {
137            autoAlpha: 1
138        });
139
140    var controller = new ScrollMagic.Controller();
141
142    var box3 = new ScrollMagic.Scene({
143            triggerElement: '#trig03',
144            triggerHook: 0,
145            duration: "200%"
146        })
147
148        .setTween(box3)
149        .setPin('#trig03')
150        .addIndicators()
151        .addTo(controller);
152  </script>
153</body>
154
155</html>
156

試したこと

scroll-snapでスナップ（引っかかり）のあるスクロールがまったくカン・タン・だ！

上記サイトを参考に
下記コードを追加しましたが、うまくいきません。。。

css
1.section{
2  scroll-snap-type: y mandatory;
3}
4
5.box01,
6.box02,
7.box03 {       
8   scroll-snap-align: start;
9}
10

有識者の方がいらっしゃいましたら、ご教授いただけますと嬉しいです。
どうぞよろしくお願い致します。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

GSAP スクロールマジック(ScrollMagic) とスクロールスナップ(scroll-snap)を併用したい

前提・実現したいこと

該当のソースコード

試したこと

関連した質問