最近JavaScriptでGSAPを使ったアニメーションを試しているのですが、
マジで何から始めればいいか状態で困ったことがいくつかあったので
同じようなことで迷っている人だったりの助けになればなと思いここに残します！

基本構造にある関数の意味

gsap.utils.toArray("動かしたい要素名").forEach(target => { })

私が使った構造はこんな感じで、初見だとそれぞれの関数が何をしているのかは
なんとなくは分かったんですが詳しくはわかりませんでした。

なので一つ一つ調べてみました。

toArray

toArray(“動かしたい要素名”)はJavaScriptでいうquerySelectorAllでした。
querySelectorAllの短縮系と思ってもらえればいいので
カッコの中身はクラス名で指定したりIDだったり要素でも行けるようです。
そしてもちろんSelectorAllなので配列として扱われます。

forEach

forEachはfor文でした。
先ほど述べた通りtoArrayで指定した要素は配列として扱われます。
なので例えば、動かしたい要素が複数あり、それを一つのクラス名で管理したい場合
querySelectorAllで要素を取得してfor分を回して、処理を記述していくと思います。

ですがGSAPの場合あの長ったらしいfor文をすっ飛ばしてtoEachで解決です。
あら便利。

target

こいつは指定した要素名のことを指します。

なのでまとめると、

gsap.utils.toArray(".move").forEach(target => { })

こういった書き方の場合は、toArrayで.moveというクラス名のついている
すべての要素を取得しそれら複数の要素をforEachで回してなんらかの処理をする。
といった意味になります。