WEBサイトの背景をgsap等でスクロールアニメーションにしたい

実現したいこと

WEBサイトの背景をスクロールアニメーションのようなイメージでgsapのscroll triggerを用いて動かしたい。
複数のboxが下から上に上がるというものをセクションごとではなく、リピートやループされるようにして下まで続けたいが上手くできないです。
実際に作成するサイトはタブ切り替えのセクションがあるので、タブ毎に高さが異なっても下の方にはboxがない。といったことがないようにしたいです。
ちなみにgsapでなくてもイメージに近いものになれば良いです。
以下がイメージに近いですが、知識が浅く編集できかねました。
▼Physics-Based Background Scroll Effects
https://design.webclips.jp/physics-based-background-scroll/

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10
11  <section id="mv">
12  <div class="top">
13    <div class="mv">
14    </div>
15  </div>
16  </section>
17
18  <section id="about">
19    <div class="about-text">
20      <br>テキストテキストテキストテキストテキストテキストテキスト<br>
21      テキストテキストテキストテキストテキストテキストテキスト
22      テキストテキストテキストテキストテキストテキストテキスト<br>
23    </div>
24    <div class="animation-area">
25      <div class="box blue">
26      </div>
27      <div class="box green">
28      </div>
29      <div class="box orange">
30      </div>
31    </div>
32  </section>
33
34  <section id="data">
35    <div class="bg">
36    <div class="data">
37      <div class="headline">
38      当社について
39    </div>
40    <div class="data-text">
41      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
42  </div>
43</div>
44</div>
45<div class="animation-area">
46  <div class="box blue_2">
47  </div>
48  <div class="box green_2">
49  </div>
50  <div class="box orange_2">
51  </div>
52</div>
53  </section>
54
55 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
56<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
57<script src="script.js"></script>
58</body>
59</html>

css
1* {
2  padding: 0;
3  margin: 0;
4  font-family: "ヒラギノ角ゴ Pro", "Noto Sans JP", "Neue Helvetica", Helvetica, "Segoe UI", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
5}
6
7html {
8  font-size: 0.625rem;
9}
10
11body {
12  max-width: 420px;
13  margin: 0 auto;
14  font-size: 1.4rem;
15  line-height: 1.8;
16}
17
18#mv .top {
19  height: 300px;
20  background-color: rgb(247, 133, 39);
21  z-index: 100;
22}
23#mv .header {
24  background: #fff;
25}
26#mv .header-menu {
27  display: -webkit-box;
28  display: -webkit-flex;
29  display: -ms-flexbox;
30  display: flex;
31  -webkit-box-pack: justify;
32  -webkit-justify-content: space-between;
33      -ms-flex-pack: justify;
34          justify-content: space-between;
35  -webkit-box-align: center;
36  -webkit-align-items: center;
37      -ms-flex-align: center;
38          align-items: center;
39  padding: 10px 20px;
40}
41#mv .h-right {
42  background: #5151F0;
43  padding: 8px 10px;
44  border-radius: 5px;
45  -webkit-box-shadow: 0px 4px #3030C5;
46          box-shadow: 0px 4px #3030C5;
47}
48#mv .h-right a {
49  text-decoration: none;
50  color: #fff;
51  font-weight: bold;
52}
53#mv .h-right a img {
54  margin-bottom: -3px;
55}
56#mv .mv {
57  max-width: 100%;
58}
59#mv .mv img {
60  width: 100%;
61}
62#mv .top {
63  position: relative;
64  z-index: 100;
65}
66
67#about .animation-area {
68  width: 100%;
69  z-index: -100;
70  top: -300px;
71}
72#about .about-text {
73  font-weight: bold;
74  text-align: center;
75  width: 90%;
76  margin: 20px 20px 50px;
77  position: relative;
78  z-index: 100;
79}
80#about .box {
81  margin: 40px 0;
82  border-radius: 5px;
83}
84#about .green {
85  background-color: #51C93D;
86  width: 30px;
87  height: 30px;
88  margin-left: 10px;
89}
90#about .blue {
91  background-color: #59B2F6;
92  width: 30px;
93  height: 30px;
94  float: right;
95  margin: -25px 10px 0;
96}
97#about .orange {
98  background-color: #F19E1A;
99  width: 30px;
100  height: 30px;
101  float: right;
102  margin-right: 10px;
103}
104#about .green_2 {
105  background-color: #51C93D;
106  width: 30px;
107  height: 30px;
108  margin-left: 10px;
109}
110#about .blue {
111  background-color: #59B2F6;
112  width: 30px;
113  height: 30px;
114  float: right;
115  margin: -25px 10px 0;
116}
117#about .orange_2 {
118  background-color: #F19E1A;
119  width: 30px;
120  height: 30px;
121  float: right;
122  margin-right: 10px;
123}
124
125#data .bg {
126  background: #fff;
127  border: solid 1px #000;
128  margin: 20px 20px 70px;
129  border-radius: 8px;
130}
131#data .headline {
132  margin: 30px 0 20px;
133}
134#data .data {
135  margin: 20px;
136}
137#data img {
138  width: 100%;
139}
140

js
1gsap.to('.blue',.7,{
2  y:-200,
3  scrollTrigger:{
4    trigger:'section',
5    start:'top center',
6  }
7})
8gsap.to('.green',.7,{
9  y:-200,
10
11  scrollTrigger:{
12    trigger:'section',
13    start:'top center',
14  }
15})
16
17gsap.to('.orange',.7,{
18  y:-200,
19  scrollTrigger:{
20    trigger:'section',
21    start:'top center',
22  }
23})
24
25gsap.to('.blue_2',.7,{
26  y:-200,
27  scrollTrigger:{
28    trigger:'section',
29    start:'top center',
30  }
31})
32gsap.to('.green_2',.7,{
33  y:-200,
34
35  scrollTrigger:{
36    trigger:'section',
37    start:'top center',
38  }
39})
40
41gsap.to('.orange_2',.7,{
42  y:-200,
43  scrollTrigger:{
44    trigger:'section',
45    start:'top center',
46  }
47});

試したこと

セクション毎にしないとできそうにないので、dataのセクションにも入れたが表示されず、
同じクラス名だと問題かと思ったのでクラス名を変えたが表示されなかった。

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

回答1件

fixed にして、一番奥に置くのがよさそうに思います。

html
1    <section id="mv">
2        <div class="top">
3            <div class="mv">
4            </div>
5        </div>
6    </section>
7
8    <section id="about">
9        <div class="about-text">
10            <br>テキストテキストテキストテキストテキストテキストテキスト<br>
11            テキストテキストテキストテキストテキストテキストテキスト
12            テキストテキストテキストテキストテキストテキストテキスト<br>
13        </div>
14    </section>
15
16    <section id="data">
17        <div class="bg">
18            <div class="data">
19                <div class="headline">
20                    当社について
21                </div>
22                <div class="data-text">
23                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
24                </div>
25            </div>
26        </div>
27    </section>
28
29    <div class="animation-area">
30        <div class="box blue">
31        </div>
32    </div>

css
1.animation-area {
2  z-index: -100;
3  position: fixed;
4  inset: 0 0;
5}
6.blue {
7  background-color: #59B2F6;
8  width: 30px;
9  height: 30px;
10  position: absolute;
11  bottom: 0;
12  left: 10%;
13}

js
1gsap.to('.blue', .7, {
2  y: -200,
3  scrollTrigger: {
4    trigger: document.body,
5    start: 'top top',
6    end: 'bottom bottom',
7    scrub: 1,
8  }
9})