【GSAP】.set( )の使い方

今日は .set() の使い方について説明します。

.set() は、対象のプロパティを設定することができるメソッドです。
アニメーションはありませんが、対象を配置する場所を設定することができます。

継続時間０の .to() と同じ働きをするため、以下のように記述しても同様の結果が導かれます。

gsap.set(".class", {x: 100, y: 100, opacity: 0});
gsap.to(".class", {x: 100, y: 100, opacity: 0, duration: 0});

また、配列やセレクタの名前を利用して、複数の対象に対して同時にプロパティを設定することもできます。

gsap.set([".class01", ".class02", ".class03"],{x: 100, y: 50, opacity: 0.5});

セレクタの名前を変数に入れておいて、以下のように記述することもできます。

const class01 = ".class01";
const class02 = ".class02";
const class03 = ".class03";

gsap.set([class01, class02, class03],{x: 100, y: 50, opacity: 0.5});

参考サイト

gsap.set() | GSAP | Docs & Learning

Returns : Tween