GSAP × 疑似要素アニメーション！CSSカスタムプロパティで実装する方法

お疲れさまです、八木です。

Web制作で、要素にアニメーションを適用する際に、GSAPを利用することはよくあるかと思います。
しかし、通常のHTML要素にアニメーションを適用するのとは異なり、疑似要素（::beforeや::after）に直接アニメーションを適用することはできません。
これはGSAPというより、JavaScriptの仕様上、疑似要素を直接取得することが出来ないためです。

ではどのようにアニメーションを適用するのでしょうか。

この記事では、GSAP を用いて疑似要素にアニメーションを適用する方法 について解説します。
今回は CSSカスタムプロパティ（CSS変数） を活用し、GSAP で疑似要素を制御する方法を紹介します。

1 カスタムプロパティを用いた疑似要素のアニメーション
2 コード解説
3 CSSRulePlugin
4 まとめ

カスタムプロパティを用いた疑似要素のアニメーション

CSSカスタムプロパティを用いることで、疑似要素のスタイルを動的に変更し、GSAPを活用してスムーズなアニメーションを実現できます。

では早速ですが実際のコードを見ていきましょう。

See the Pen
pseudo-element-animation by 八木秀一郎 (@huuglfoo-the-solid)
on CodePen.

このコードでは、親要素で設定したカスタムプロパティを疑似要素に適用させ、GSAP上でカスタムプロパティを変更することで実質疑似要素にアニメーションを適用させています。

また、今回使用したアニメーションの詳しい内容は弊社のこちらの記事に記載されているので、よろしければご確認ください！

コード解説

CSSの設定

.animated__title クラスには position: relative; を設定し、疑似要素が ::after として親要素内に配置されるようになっています。
overflow: hidden; を指定することで、アニメーション中に疑似要素がはみ出さないようにしています。
–bgTextX: -100%; をカスタムプロパティとして定義し、疑似要素の transform: translateX に適用しています。

疑似要素 ::after の設定

最初に表示される背景色部分になります。

position: absolute; で .animated__title 内に配置します。
transform: translateX(var(–bgTextX)); を設定し、CSSカスタムプロパティ –bgTextX の値に応じて X軸にスライドさせるようにしています。

GSAPを使用したアニメーションの適用

const title = document.querySelector(‘.animated__title’);

アニメーションの対象となる要素を取得します。

const tl = gsap.timeline();

GSAPのタイムライン機能を使用して、アニメーションを記述しました。
タイムラインを利用することで、アニメーションが適用される順番が明確になり、タイミングの調整もしやすくなるため、非常に便利です！

tl.to(title, {
　keyframes: [
　　{ “–bgTextX”: “-100%”, at: 0 },
　　{ “–bgTextX”: “0%”, at: 0.5 },
　　{ “–bgTextX”: “100%”, at: 1 }
　　],
　duration: 1,
})

このコードでは、親要素である.animated__titleに設定したカスタムプロパティ –bgTextX の値を変化させ、疑似要素をスライドさせています。

keyframes を使うことで、アニメーションの進行に合わせて –bgTextX の値を -100% → 0% → 100% へとスムーズに変化させています。
仮にCSSで記載する場合下記のようになります。

例：
@keyframes lineAnime {
　0% {　transform: translateX(-100%)}
　50% {　transform: translateX(0)}
　100% {　transform: translateX(100%)}
}

duration: 1 によって、このアニメーションが1秒間で完了するように設定しています。

.to(title, { color: “black”, duration: 0.5 }, “-=0.4”);

このコードでは、背景が通過した後にテキストの色を黒に変更する処理を行っており、
color: “black” で、テキストの色を黒 (black) に指定し、duration: 0.5 で0.5秒かけて色を変更するようにしています。

また、最後の “-=0.4” という指定がポイントで、これは 前のアニメーションが終わる0.4秒前からこのアニメーションを開始する という意味になります。

個人的にGSAPのタイムライン機能の便利だと思うポイントで、
複数のアニメーションのタイミングを細かく調整できるという点があります。

通常の setTimeout やanimation-delayなどでアニメーションを制御しようとすると、それぞれのタイミングを個別に指定する必要があり、管理が大変になります。
しかし、GSAPのタイムラインを使えば、”-=0.4″ のように前のアニメーションとどれくらいの間隔を空けるかを簡単に指定できるので、直感的に調整することが出来ます！