gsapのTimelineでフェードアウトするスライダーを作成する方法(垂直と水平)

2021年8月26日gsap

gsapのTimelineでフェードアウトするスライダーを作成する方法(垂直と水平)を紹介します。

gsapのTimelineで垂直にフェードアウトするスライダーを作成する方法

デモ

See the Pen
by Sosak (@Sosak2021)
on CodePen.

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()メソッドで消えるタイミングを次の現れるものと同じタイミングにしたいので、staggerとdurationと同じ時間ずらします。

要素の選択の注意点として、
複数要素がある場合、変数に格納するときにquerySelectorAll()を使ってそのまま指定すると全部が動いてしまいます。forEachなどで一つずつ指定する必要があります。
また、querySelectorで選択したら、最初の一つのみが選択されます。
そのため、上のように、複数要素がある場合、クラス名を直接指定したほうが簡潔な記述になりやすいです。

gsapのTimelineで水平にフェードアウトするスライダーを作成する方法

デモ

See the Pen
by Sosak (@Sosak2021)
on CodePen.

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を設定する方法もあります。