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変数（カスタムプロパティ）の使い方

使い方を簡単に説明すると、ハイフン2つの変数名と適当なCSSプロパティーの値（例えば、--color: #ffffff;）で変数を宣言します。宣言した変数を使うにはvar()関数（例えば、background-color: var(--color);）で使うことができます。

例えば次のような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
});

実装サンプル