GSAPを久々に使ってみたらバージョン3になっていい感じになってた話

GSAPの記事は以前にも出していたのですが、それはバージョン3以前の話でした。

久々にアニメーション案件があったので、せっかくだからバージョン3を触ってみよう、ということで触った所感と使い方を羅列します。

まず、簡単に。

import { gsap } from 'gsap';

const animEl = document.querySelector('#anim');

gsap.from(animEl, { opacity: 0 })

<||

こちら透明度を0から1に上げるだけのアニメーションですが、書き方が簡素です。
というより、importがかなり明瞭になりました。

以前はTweenLiteなのかTweenMaxなのか、それともTimeLineMaxなのかインポートを明記しないといけない（しかもなぜか読み込みエラー起きたり）感じだったのですが、バージョン3からは統合されて、基本的にはgsapだけをインポートすればよい仕様になっています。

今まで使っていた人からすれば逆に「こんなに記述量少なくていいの？」て感じですよね。

で、TimeLineとかも進化しておりましてこんな感じで書けるようになりました。

>|javascript|
const animsTl = gsap.timeline({
        defaults: {
            duration: 2,
            ease: "Linear.easeInOut"
        }
    })


animsTl
        .to(anim1, { opacity: 1 })
        .to(anim1, { opacity: 0 }, 5)
        .to(anim2, { opacity: 1, duration: 3 }, 5)
<||

まず、タイムラインの引数にdefaultsというオブジェクトを渡せるようになりました。
ここで指定できるのは、durationとeaseの二つなのですが、長いタイムラインを作るときにはこのdurationのデフォルト値がかなりありがたい...


上記コードの最終行で指定してますが、もちろんオーバーライドも可能で、durationを渡してあげると上書き可能です。
タイムライン作成する場合は基本的に秒数が一定なことが多いですが、メインレイヤーとかは秒数長くするとかあると思うので、これ使うとめっちゃいいです。


あと、イージングですがこれも確か以前までは別でインポートしないといけなかった気がする...

バージョン3でも別で読み込みができるらしいですが、このように文字だけで指定できるのは楽ですよね。