GSAPのpin機能がうまく効かない

Question

実現したいこと

同じ場所でカードが重なる表現をしたく、下記YOUTUBEを参考にコードを書きました。
https://youtu.be/e8SdVY-l8ZE?si=H_hjRhFUgq-RKHui

発生している問題・分からないこと

pin機能がうまく機能していないのか、スクロールをしても要素が重なりません。

エラーメッセージ

Uncaught ReferenceError: scrollTrigger is not defined

該当のソースコード

gsap.registerPlugin(scrollTrigger);

// lenis
const lenis = new Lenis();
lenis.on('scroll', scrollTrigger.update);
gsap.ticker.add((time) => {
    lenis.raf(time * 1000)
});

gsap.ticker.lagSmoothing(0);

//animation
const cardsWrapper = gsap.utils.toArray(".cards-item");
const cardsEl = gsap.utils.toArray(".cards-el");

cardsWrapper.forEach((e, i) => {
    const card = cardsEL[i];
    let scale = 1, rotate = 0;
    if(i !==cardsEl.lenght - 1) {
        scale = 0.9 + 0.025 * i;
        rotate = -10;
    }
    gsap.to(card, {
        scale: scale,
        rotationX: rotate,
        transformOrigin: "top center",
        ease: 'none',
        scrollTrigger: {
            trigger: e,
            star: "top" + (70 + 40 * i),
            end: "bottom +=650px",
            endTrigger: ".end-anim",
            pin: e,
            pinSpacing: false,
            scrub: true
        }
    })
});

.voice-card {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 2;
}
.cards {
    width: 70%;
    margin: 0 auto;
    padding: 0 50px;
}
.cards-item {
    width: 100%;
    perspective: 500px;
    margin-bottom: 50px;
}
.cards-item:last-child {
    margin-bottom: 0;
}
.cards-el {
    width: 100%;
    height: 400px;
}
.cards-el-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 40px;
    padding: 45px;
    border-radius: 4px;
    background: #BAA0A01A;
    backdrop-filter: blur(10px);
    will-change: blur;
}
.cards-img {
    width: 40%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}
.cards-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cards-txt {
    width: calc(60% - 40px);
    color: var(--bg1);
}
.cards-el-sub-title {
    font-size: clamp(1.5rem, 1.443rem + 0.29vw, 1.7rem);
}
.cards-el-title {
    margin-bottom: 20px;
    font-size: clamp(2rem, 1.771rem + 1.14vw, 2.8rem);
}
.cards-el-p {
    font-size: clamp(1.4rem, 1.343rem + 0.29vw, 1.6rem);
}

<section id="voice" class="voice-card">
                <h2>VOICE</h2>
                <div class="cards">
                    <div class="cards-item">
                        <div class="cards-el">
                            <div class="cards-el-wrapper">
                                <div class="cards-img">
                                    <img src="image/voice4.jpg" alt="boy1">
                                </div>
                                <div class="cards-txt">
                                    <p class="cards-el-sub-title">男の子 (4歳) のママ　初級コース</p>
                                    <h4 class="cards-el-title">レッスン日を楽しみにするほどピアノが大好きに。</h4>
                                    <p class="cards-el-p">
                                        音楽の楽しさを知ってほしいと思い通い始めました。<br>
                                        息子にとってピアノが初めての楽器でしたが、優しく丁寧に指導していただき今ではピアノが大好きです。<br>
                                        まだまだ集中が続かない息子に、その都度指導の方法を変えてレッスンを進めていただけることもとてもありがたいです。​<br>
                                        「早くピアノにいきたい！」「先生大好き！」とレッスン日を楽しみにする姿を見て、先生と出会えてよかったなと感じます。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cards-item">
                        <div class="cards-el">
                            <div class="cards-el-wrapper">
                                <div class="cards-img">
                                    <img src="image/voice5.jpg" alt="boy2">
                                </div>
                                <div class="cards-txt">
                                    <p class="cards-el-sub-title">小学3年生 男の子のママ　演奏コース</p>
                                    <h4 class="cards-el-title">ピアノ演奏の奥深さと楽しさを親子で実感。</h4>
                                    <p class="cards-el-p">
                                        初めてのピアノですが、先生の丁寧なご指導のおかげで息子のモチベーションも維持したままレッスンに通えています。<br>
                                        指や身体の使い方、緩急のつけ方や、曲の情景を想像して弾くなど、本格的な指導をして頂け、１時間のレッスン内で音色がどんどん美しく変わっていく様子が、素人の私にもわかる程で、いつも感動しています。<br>
                                        ピアノ演奏の奥深さと楽しさを親子で実感しています。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div><div class="cards-item">
                        <div class="cards-el">
                            <div class="cards-el-wrapper">
                                <div class="cards-img">
                                    <img src="image/voice6.jpg" alt="boy3">
                                </div>
                                <div class="cards-txt">
                                    <p class="cards-el-sub-title">男性 (24歳) ピアノ経験あり　​大人のコース</p>
                                    <h4 class="cards-el-title">細やかな指導のおかげでピアノが以前より好きになった。</h4>
                                    <p class="cards-el-p">
                                        先生は雰囲気が明るく気さくな先生で、毎回のレッスンがとても楽しいです。<br>
                                        ピアノがより好きになりました。<br>
                                        ​専門的な技術、知識を持たれており、自分の演奏の良い部分やできていない部分を細やかに指導して くださります。<br>
                                        自分の弱点がわかるので練習にも取り組みやすくなりました。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="end-anim"></div>
            </section><!-- voice -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
        <script src="js/script.js"></script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

GSAPのScrollTriggerに必要なプラグインは記載、GSAPを利用する際のコードも記載していますが、変化ありません

補足

特になし

Comments

[Lhankor_Mhy]

import や CDN 読み込みを忘れているとかはないですか？

https://gsap.com/docs/v3/Installation/?tab=cdn&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true&plugins=ScrollTrigger

https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true&plugins=ScrollTrigger

[Lhankor_Mhy]

あ、HTMLの最後に記載ありますね。失礼しました。

[Lhankor_Mhy]

マルチポストです。
https://qiita.com/tsl56/questions/751baa9b88a4a06c75c7

https://teratail.com/help#posted-otherservice

Answer 1

typoです。scrollTrigger→ScrollTrigger

Comments

[tsl56]

回答ありがとうございます。scrollTriggerを全てScrollTrigger試してみましたが解決できませんでした。
この場合どの辺りに原因がありそうでしょうか？

[Lhankor_Mhy]

> scrollTriggerを全てScrollTrigger試してみました

それはやりすぎでは……変えなくてもいいところは変えなくていいですよ

---

> この場合どの辺りに原因がありそうでしょうか？

試してみた場合のエラーメッセージなどはありますか？

[tsl56]

scrollTrigger is not definedから下記エラーに変わりました。
Uncaught ReferenceError: cardsEL is not defined
at script.js:63:18
at Array.forEach (<anonymous>)
at script.js:62:14

[Lhankor_Mhy]

cardsEL→ cardsEl

コードエディタ使った方がいいですよ

[tsl56]

回答したあとに気づきましたmm
失礼しました