GreenSock (gsap.js)のCSSRulePlugin.jsがうまく動かなかった件

-

アニメーション作成を強力にサポートしてくれるgsap.jsの、CSSRulePluginでうまくいかなかったことが合ったのでメモ。

CSSRulePluginは、「:before」「:after」といった疑似要素に対してアニメーションを設定できるようになるなどの機能を追加するプラグインです。

例えば以下のような書き方で、:afterの要素をアニメーションさせることができます。


var myRule = CSSRulePlugin.getRule(".btn:after");
myRule.forEach((index, element) => {
    gsap.to(element, { duration: 10, cssRule: { backgroundColor: "#600" } });
})


これがなかなかハマったのですが、大事なことはgetRule()のところで指定するClass名。
このClass名はCSSで実際に指定している表記と完全に一致させる必要があるということのようです。

もし上のスクリプトでmyRuleをconsole.logで出してみて「undefined」と出力されるようであれば、この原因が疑われます。
試してみてください。

このブログの人気の投稿

CITY+に入っちゃえばいいじゃない。

-
DAZNがチャンピオンズリーグを放送しないこととなった2020-21シーズン。 みなさま、いかがお過ごしですか？(^^; UEFA TVというのでも見られるようではありますが、無料なのはうれしい反面、いつどうなるか分からないな、というようなところもあり、個人的にはCITY+に加入するのが良いのではないかと思ってます。 ■CITY+って？ Manchester Cityが直接運営する公式の有料動画サービスです。 有料だけど、公式だから、クラブにきっちりお金が入るんじゃないかなというところは、サポーターとしてはうれしいかな。 ■料金は？ 月額：1.99ポンド 日本円だと270円くらいですかね。為替レートによりますが。 まぁ、安いことには変わりないです。 決済にはクレジットカードが便利ですが、JCBが使えませんので要注意。VISAとAmericanExpressは使えます。 ■何が見られる？ ・トップチームの試合の見逃し配信（プレミアリーグ、FAカップ、カラバオカップ、チャンピオンズリーグ） ・EDSのライブ配信 ・女子チームのライブ配信 ・限定ドキュメンタリー番組 有料で見られるコンテンツはこんなところ。 無料でもハイライトや試合前後のインタビューなどはみられます。 トップチーム（いわゆる男子チーム）の試合だけ生放送ではありませんが、試合終了後24時間以内に見逃し配信される、となっています。 実際にはもっと早くて、６～８時間くらいでは見られてる感じ。 チャンピオンズリーグのように日本時間の早朝に行われる試合は昼頃には見られるようです。 ただ1つ残念なところといえば、試合の結果は動画のサムネイルであらかじめわかってしまうこと。 だから、「情報遮断しておいて後で楽しみに見る」という感じには使えません。 あくまで結果はわかったうえで、90分のパフォーマンスを振り返るという感じ。 まぁ、個人的にはそれでもいいのかな～と思ってます。 マンチェスターシティはそれでも十分楽しめるサッカーをしているチームですからね。 ■どうやってみられる？ ・パソコン（ブラウザを通して視聴可能） ・スマホの公式アプリ ・AppleTV ・Amazon Fire TV Stick などで見られます。 出先で見るとパケ死が気になるけど、Wifiあるところだったら見る手段には困りません。 ■その他 試合の実
続きを読む

ペップ、リヨンを称賛

-
チャンピオンズリーグのリヨン戦の後、ペップ監督がリヨンを称賛していますよ。 [ペップ・グアルディオラ／公式サイトより抜粋] フランスのリーグはパリ・サンジェルマンだとみんな言う。いつもそういうが、それは間違っているよ。 フランスのチームとの対戦ではいつも、彼らのフィジカル（の強さ）を感じる。 だからフランスはワールドカップで優勝できたと思う。 みな強く、速く、やっかいだ。 だからこそ、今日の試合の自分たちのパフォーマンスを称えたい。 チャンピオンズリーグは難しい。 大きなクラブ、たとえばインテル、トテナム、リバプール、ナポリ、パリ・サンジェルマン、これらのうちのどこかはグループリーグ落ちする。いかに難しいかがわかるね。 リヨンは現在、フランスのリーグ・アンでは2位につけていますね。 といっても、パリが抜けてますので、14試合終了時点で勝ち点差がすでに15もついていますけど。。。 確かにチャンピオンズリーグでのリヨンの戦い方は見事です。 マンチェスターダービーよりもだいぶ苦しめられた感じがしますし、スタッツ的にもそれが表れています。 個人的にはパリ1強は面白くないので、フランスの他のチームにも頑張ってもらいたいところですね。
続きを読む

いよいよチャンピオンズリーグ開幕！

-
チャンピオンズリーグを前に、公式サイトにスターリングのインタビューが掲載されています。 [ラヒーム・スターリング／公式サイトより抜粋] チャンピオンズリーグでプレーできるというのは、素晴らしいことだ。特にポルトガルでは（リヨン戦で）思わしくない結果だったからね。 だから、もう一度挑戦できるというのはありがたいよ。 行って、楽しんで、そしてどこまでいけるかやってみよう。 昨シーズンの後半は、UEFAとのごたごたもありましたから、マンチェスターシティはチャンピオンズリーグに出られないという可能性もありました。 単に前シーズンの雪辱を晴らすというだけではなく、今シーズンも出場できるということが本当にうれしいのかなと思います。 ま、残念なことを上げるとすると、日本のDAZNでは放送が無いようだということですかね。 CITY＋に入りましょ、みなさん。
続きを読む