Home
GSAP
【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

公開日
2022.10.08
更新日
2022.12.18
【GSAP】擬似要素(before・after)をアニメーションさせる方法

どうも!かけちまるです!

GSAPではデフォルトだと擬似要素(beforeafter)を指定できません。
CSSで擬似要素をよく使う人には痛いところではあります。

しかし、CSSRulePluginを使うことで指定することができます。

この記事では、

  • ・CSSRulePluginの使い方
  • ・擬似要素(beforeafter)の指定方法
  • ・CSSRulePlugin以外の対処法

がわかります。

CSSRulePluginとは?

通常GSAPは要素のインラインスタイルを変化させます。
CSSRulePluginを使うとスタイルシートで定義したCSSプロパティを変化させアニメーションできるようになります。
:before:afterの擬似要素も変更可能なのです。

GSAP3からCSSRulePluginは廃止されたようですが、まだ一応使えるようです。
廃止を気にする人は、CSS変数を使ったやり方もあるのでチェックしてみてください。

CSSRulePlugin以外の対処法

CSSRulePluginの使い方

まず、CSSRulePluginを読み込む必要があります。
もちろんGSAPを読み込んでいる前提です。

HTML
開く&閉じるコピー
<script src="https://unpkg.com/gsap@3.11.0/dist/CSSRulePlugin.min.js"></script>

そして、registerPlugin()でプラグインを登録します。

JavaScript
開く&閉じるコピー
gsap.registerPlugin(CSSRulePlugin);

擬似要素(before・after)の指定方法

CSSRulePluginの準備ができたところでアニメーションさせたい要素を取得しましょう。
要素の取得には、getRule()メソッドを使います。

JavaScript
開く&閉じるコピー
const rule = CSSRulePlugin.getRule('.container::after');

あとは、いつものようにトゥイーンを記述していきます。

JavaScript
開く&閉じるコピー
gsap.to(rule, 1, { backgroundColor: 'rgba(255, 0, 0, .3)', repeat: -1, yoyo: true });

CSSRulePlugin以外の対処法

GSAP3からCSSRulePluginが廃止されたようなのでCSSRulePluginを使わない方法も解説します。

カスタムプロパティ(CSS変数)を使用する方法です。
カスタムプロパティの値を変化させることで、カスタムプロパティを使っている箇所を変化させることができます。

カスタムプロパティ(CSS変数)がよくわからない人は次の記事が参考になりそうです。

例えば次のようなCSSだとします。

CSS
開く&閉じるコピー
:root{ --bg-color: rgba(255, 255, 0, .3); } .container{ width: 70%; position: relative; } .container::after{ content: ""; background-color: var(--bg-color); width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

次のようにカスタムプロパティを変化させることでCSSRulePluginを使わずに実装できます。

JavaScript
開く&閉じるコピー
gsap.to(':root', 1, { '--bg-color': 'rgba(255, 0, 0, .3)', repeat: -1, yoyo: true });

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

コピペで完了!CSSグラデーション(linear-gradient)まとめ

コピペで完了!CSSグラデーション(linear-gradient)まとめ

【Three.js基礎】概念の理解と立方体の実装

【Three.js基礎】概念の理解と立方体の実装

for文内でsetTimeoutを使うときの変数のスコープとクロージャ

for文内でsetTimeoutを使うときの変数のスコープとクロージャ

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【初心者向け】CodePenの使い方からサイト埋め込み方法

【初心者向け】CodePenの使い方からサイト埋め込み方法