JavaScript
tweenmax
gsap
TimelineMax

TimelineMaxで、クラスの付け替えをしたい

表題の通りなのですが、

Timelinemaxを利用する際に、jQueryでいうところのaddClassやremoveClassってどうやるんだろうと悩み、恥ずかしながら調べるのに時間がかかってしまったので、備忘録的に記事に残します。

結論から言うと、ドンピシャな記事が公式にちゃんとありました。

Timelinemax: add classes


クラスをつけたいとき(addClass)

const tl = new TimelineMax();

tl.set('.target', {className:"+=active"});


クラスをとりたいとき(removeClass)

const tl = new TimelineMax();

tl.set('.target', {className:"-=active"});

ただ、アニメーション実装していて、次のような課題が生じました。


CSSでアニメーションするか、jsでgsapに任せるか

クラスを付けようとしたそもそもの目的なのですが、

例えば上記の例で言うと、「.active」にCSSアニメーションをつけていました。

で、任意のタイミングでクラスが付与されたら、無事アニメーション!とテンション上がったのですが。。

一点問題があって、timelinemax側では、CSSアニメーションの終了を検知することができません。

場合によってはコントロールできないアニメーションが出てしまうかもしれないと言うことです。

なので、timilinemaxでアニメーションを作るときは、すべてjsでアニメーションさせる方が良いのではないかという考えに至りました。。

クラスの付け替えの出番はしばらくなさそうです。

最近実装を経験したばかりなので、間違いあればご教示いただければ幸いです!

以上です。