スクロールすると要素が奥行きを持って立体的に重なるアニメーション

1
<ul class="list" data-wrapper>
2
  <li class="item" data-item></li>
3
  <li class="item item--02" data-item></li>
4
  <li class="item item--03" data-item></li>
5
</ul>

1
.list {
2
  margin: 0 auto;
3
  width: 80%;
4
  display: grid;
5
  row-gap: 100px;
6
}
7

8
.item {
9
  width: 100%;
10
  height: 75vh;
11
  background-color: #ddd;
12
}
13

14
.item--02 {
15
  background-color: #bbb;
16
}
17

18
.item--03 {
19
  background-color: #aaa;
20
}

1
// 各アイテムの y / scale の補間の端点
2
const ANIMATION_RANGE = {
3
  yPercentStart: 250,
4
  yPercentEnd: 30,
5
  scaleStart: 0.75,
6
  scaleEnd: 0.98,
7
};
8

9
// 線形補間
10
const lerp = (a, b, t) => {
11
  return a + (b - a) * t;
12
};
13

14
// 0〜1 に正規化する（例: 3件なら index=0,1,2 → t=0, 0.5, 1）
15
const indexToUnitProgress = (index, length) => {
16
  if (length <= 1) return 0;
17
  return index / (length - 1);
18
};
19

20
const mm = gsap.matchMedia();
21

22
mm.add("(prefers-reduced-motion: no-preference)", () => {
23
  const wrapper = document.querySelector("[data-wrapper]");
24
  const items = gsap.utils.toArray("[data-item]"); // 「配列」として要素を取得
25

26
  items.forEach((item, index) => {
27
    const t = indexToUnitProgress(index, items.length);
28
    const yPercent = lerp(
29
      ANIMATION_RANGE.yPercentStart,
30
      ANIMATION_RANGE.yPercentEnd,
31
      t,
32
    );
33
    const scale = lerp(ANIMATION_RANGE.scaleStart, ANIMATION_RANGE.scaleEnd, t);
34

35
    gsap.to(item, {
36
      y: `${yPercent}%`,
37
      scale,
38
      ease: "none", // イージング関数を指定しない（線形アニメーション＝linear）
39
      scrollTrigger: {
40
        trigger: item,
41
        endTrigger: wrapper,
42
        start: "center center",
43
        end: "bottom center",
44
        scrub: true,
45
      },
46
    });
47
  });
48
});