GSAPでCSS変数を変化させてみた
今回も前回に引き続きGSAPを使った記事です。
CSS変数を変化させたアニメーションを実装したので、その手順を書いていきます。
GSAPの読み込み方法
アニメーショ発火のタイミングはGSAPのScrollTriggerを使っています。このScrollTriggerを使うためにはGSAPのプラグインを読み込む必要があります。
どう読み込めばいいかはこちらを参照してください。
上記サイトで「CDNで読み込むのか？」「npmで読み込むのか？」などをタブで選択すると、それに応じたコマンドや記述方法が表示されます。また、使用したいプラグインをチェックすれば、そのプラグインの読み込み方法も表示されます。今回はScrollTriggerのプラグインを使用してCDNで読み込むので下記のような記述をします。（2024年2月のバージョンです）
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
実行結果を見てみる
解説
今回はGSAPのscrubを使い、スクロール量に応じて画像を0.1から1.0まで拡大させるアニメーションを実装しています。その際にclip-pathプロパティを使用してinset(0 0 50% 0)で切り抜いていた画像をinset(0 0 0 0)に変化させます。clip-pathプロパティをGSAPで指定して変化させても良いのですが、今回はCSS変数を使って変化させています。CSSでの記述は下記のようになります。
--clip:50%;
clip-path: inset(0 0 var(--clip) 0);
こちらは画像で表すと下記のような形です。
そして、GSAPでCSS変数を下記のように"50%"から"0"へ変化させています。
gsap.fromTo(
'.js-scale-target',
{
scale: 0.1,
'--clip': '50%',
},
{
scale: 1,
'--clip': '0',
scrollTrigger: {
trigger: '.js-scale-area',
start: 'top top',
end: 'bottom 30%',
scrub: 1,
pin: true,
markers: true,
},
}
);
変化後の切り抜き画像は下記のような形です。
このようにGSAPでCSS変数を指定して変化させることで、clip-pathプロパティが変化し、実行結果のようにスクロール量に応じて見える範囲が変化します（水色の線の数が変化しているかと思います）
ちなみに要素をスクロール量に応じてscrubを用いて拡大させる場合、1→10より0.1→1の方が自然なアニメーションになりました。
GSAPはCSS変数・CSSプロパティのアニメーションも実装できます。ぜひ、使ってみてください。
Discussion