【GSAP】gsap.utils.toArray( )の使い方

utils.toArray( )は、GSAPのメソッドのうちのひとつで、例えば複数の要素に同じアニメーションをつけたり、複数の要素に順番にアニメーションを適用したい時や、遅延を追加したいときなどに使うと便利です。

この記事ではutils.toArray( )の使い方と、このメソッドを使ったアニメーション例について説明していきます。

utils.toArray( )の使い方
1. utils.toArrayメソッドとは
2. querySelectorAll() メソッドとの違い
utils.toArray()を使用したアニメーション例
まとめ

utils.toArray( )の使い方

utils.toArrayメソッドとは

utils.toArrayメソッドは、特定の要素を配列として取得することができます。
例えば、以下のようにクラス名を指定して記述すると、「.js-move」のクラス名を持つ要素が配列として取得され、配列メソッドである.forEach( )を利用して、取得したそれぞれの要素に対してアニメーション処理が行われます。

gsap.utils.toArray('.js-move').forEach(element => {
  gsap.fromTo(element, 
    { x: -200, opacity: 0 },
    { 
      x: 0, opacity: 1,
      duration: 1, 
      scrollTrigger: {
        trigger: element,
        start: "top 80%",
        toggleActions: "play none none none"
      }
    }
  );
});

utils.toArrayメソッドのポイントは、配列として取得されることです。
配列として取得されることで、その後の java script の配列メソッドの使用が簡単になります。

querySelectorAll() メソッドとの違い

utils.toArray( )は、GSAPのメソッドですが、以下のように java scriptのquerySelectorAll() メソッドを使っても同じ処理になります。

document.querySelectorAll('.js-move').forEach(element => {
  gsap.fromTo(element, 
    { x: -200, opacity: 0 },
    { 
      x: 0, opacity: 1,
      duration: 1, 
      scrollTrigger: {
        trigger: element,
        start: "top 80%",
        toggleActions: "play none none none"
      }
    }
  );
});

何が異なるのかというと、utils.toArray()が要素を配列として取得するのに対し、querySelectorAll() は要素をNodeListとして取得することです。

utils.toArray( )が要素を配列として取得しているので、全ての配列メソッドを使用することができますが、querySelectorAll() は要素をNodeListとして取得しているので、一部の配列メソッドしか使用することができません。

querySelectorAll()の場合、処理の内容によっては、取得したNodeListを配列に変換する必要が出てきます。
forEach()の場合は、NodeListに対しても使えるため配列に変換する必要はなく、上記のように記述すればOKということになります。