gsapのTimelineでフェードアウトするスライダーを作成する方法(垂直と水平)を紹介します。
結論から言うと、gsapでスライダーを作るには、gsap.timeline({ repeat: -1 })に「from()で現れる」「to()で消える」の2つを並べ、staggerとdurationを同じ値にして要素を1枚ずつずらすだけです。
縦に流すならy、横に流すならxを指定するだけで、JavaScript側の構造は変わりません。
スライダーライブラリを入れるほどではない、テキストや画像を数枚順に見せたいだけの場面に向いています。
gsapのTimelineで垂直にフェードアウトするスライダーを作成する方法
デモ
JavaScriptコード
const btn = document.querySelector('.btn');
window.addEventListener('load', verticalSlide);
function verticalSlide() {
btn.addEventListener('click', () => {
const TLSlide = gsap.timeline({ repeat: -1 });
TLSlide
.from('.vertical-slider p', { autoAlpha: 0, stagger: 0.5, duration: 0.5, y: 100, })
.to( '.vertical-slider p',
{ autoAlpha: 0, stagger: 0.5, duration: 0.5, y: -100 },
0.5
);
});
}load完了後にアニメーションさせます。
一つずつ要素が現れては消える動きにするには、staggerとdurationを同じ時間に設定します。
また、to()メソッドで消えるタイミングを次の要素が現れるタイミングに合わせたいので、第三引数(position)にstaggerとdurationと同じ0.5を渡してずらしています。
うまく動かないときは、次の点を確認してください。
すべての要素が同時に動く場合はstaggerが抜けています。
最初の1枚しか動かない場合は、querySelector()で1要素だけ渡しているか、クラス名の綴りが違っています。
2周目以降に要素が見えたままになる場合は、from()とto()の両方にautoAlpha: 0があるかを確認します。
autoAlphaはopacityとvisibilityをまとめて扱うため、消えた要素がクリックを拾わなくなる点でもopacityより扱いやすいです。
要素の選択の注意点として、
複数要素がある場合、変数に格納するときにquerySelectorAll()を使ってそのまま指定すると全部が動いてしまいます。forEachなどで一つずつ指定する必要があります。
また、querySelectorで選択したら、最初の一つのみが選択されます。
そのため、上のように、複数要素がある場合、クラス名を直接指定したほうが簡潔な記述になりやすいです。
gsapのTimelineで水平にフェードアウトするスライダーを作成する方法
デモ
JavaScriptコード
const btn = document.querySelector('.btn');
window.addEventListener('load', horizontalSlide);
function horizontalSlide() {
btn.addEventListener('click', () => {
const TLSlide = gsap.timeline({
defaults: {
autoAlpha: 0,
stagger: 0.5,
duration: 0.5,
},
repeat: -1,
});
TLSlide
.from('.vertical-slider p', {x: -100})
.to('.vertical-slider p',{ x: 100 }, 0.5);
});
}水平の場合は、x軸なので、xに値を指定すればOKです。
記述をより簡潔にするために、上のようにtimelineにdefaultsを設定する方法もあります。
defaultsの詳しい挙動はgsapのTimelineでデフォルト値を設定する方法にまとめています。
ボタンを2回押すとTimelineが二重に作られて動きが乱れるため、実際に使うときはTimelineをクリックの外で1回だけ作り、paused: trueにしておいてボタンでTLSlide.play()やrestart()を呼ぶ形にすると安全です。
スライドが切り替わるたびに何か処理をしたい場合はGSAPコールバックの使い方、1つの要素に複数の動きを連ねたい場合はgsapのkeyframesの使い方を参考にしてみてください。