最後の要素が重なった場所で固定したい

実現したいこと

GSAPのScrollTriggerとScrollToを使って要素が重なる表現を実現したのですが、最後の要素が重なったらその場所で固定をしたいのですが、うまく実現できません。

前提

Sectionの中で終わらせたいのですが、3枚目の要素が重なってもスクロールと同時に動き次のSectionにはみ出てしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

JavaScript
1gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
2
3let timeln = gsap.timeline({
4    scrollTrigger: {
5        trigger: ".cards",
6        pin: true,
7        anticipatePin: 1,
8        pinSpacing: true,
9        start: "left-=120px left",
10        end: "bottom top",
11        scrub: 1,
12        markers: true,
13    }
14});
15
16timeln.addLabel('card1');
17timeln.to('.cards-item1', {
18    xPercent: 0,
19    opacity: 1
20});
21
22timeln.from('.cards-item2', {
23    xPercent: 75,
24    opacity: 0
25});
26timeln.addLabel("card2");
27
28timeln.to(".cards-item1", {
29    scale: 0.95,
30    xPercent: -0.5,
31    opacity: 0.5
32}, "-=0.3");
33
34timeln.to('.cards-item2', {
35    xPercent: 0,
36    opacity: 1
37});
38
39timeln.from('.cards-item3', {
40    xPercent: 75,
41    opacity: 0
42});
43timeln.addLabel('card3');
44
45timeln.to(".cards-item2", {
46    scale: 0.98,
47    xPercent: -0.4,
48    opacity: 0.6
49}, "-=0.3");
50
51timeln.to(".cards-item3", {
52    xPercent: 0,
53    opacity: 1,
54});

試したこと

3つ目の要素に対してScrollTriggerを作りましたが、途中で止まったりと思う様な動きになりませんでした

補足情報（FW/ツールのバージョンなど）

こちらにコードを載せました。
https://github.com/sayuri-tanimoto/test.git

yambejp

2024/11/21 07:48

現状のソースを動作が確認できるサイトにアップできませんか？そのうえでどこの部分をどう変更したいか図示できませんか？

Lhankor_Mhy

2024/11/21 09:13

ご提示のコードを試してみましたが、要素が重なることはありませんでした。ご提示いただいていない部分に原因がありそうです。

tsl56

2024/11/21 09:17 編集

多少のレイアウト崩れはありますが、下記に記載しました。 https://codepen.io/fnpjzfgv-the-sans/pen/xxvoJjq

Lhankor_Mhy

2024/11/21 09:18 編集

URLが間違っているようですね。→編集を確認

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

回答1件

いろいろな原因がありそうですが、ひとつだけ。

css
1.card-wrapper {
2    display: flex;
3    align-items: center;
4    width: 100%;
5    height: 100%;
6    gap: 40px;
7    padding: 45px;
8    border-radius: 4px;
9    background: #BAA0A01A;
10    backdrop-filter: blur(10px);
11    will-change: blur;
12}