scrollTrigger
基本的な使い方
gsap.to(".box", {
x: 400,
scrollTrigger: {
trigger: ".box",
start: "top center", // ※1
markers: true, // マーカーを表示させる
scrub: true, // スクロール量に応じたアニメーションをしたいとき
pin: true, // ※2
}
});
※1 … 「.boxのtop」が「画面のcenter」に来たときにスクロールトリガーが発火します
※2 … スクロールすると通常は要素が上下に移動しますが、「pin: true」とすることでアニメーションの開始時から終了時まで要素を上下方向に固定できます
BACK