@tsl56posted at 2024-11-18

GSAPのpin機能が効かない

Q&A

Closed

HTML CSS JavaScript gsap ScrollTrigger

解決したいこと

GSAPのpin機能を使って、要素が重なる表現画作れない

例）
ローカル環境でサイト構築をしています。
GSAPのscrolltriggerのpin機能を使って、
同じ場所で要素が重なっていく表現をしたいのですが、pin機能がうまく効きません。

発生している問題・エラー

script.js:63 Uncaught ReferenceError: cardsEL is not defined
    at script.js:63:18
    at Array.forEach (<anonymous>)
    at script.js:62:14

例）

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

JavaScript

例）

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
        }
    })
});

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

Are you sure you want to delete the question?