why my CSSRulePlugin GSAP is not working?-CodePudding

Hello I'm using Gsap and I need to use GSAP CSSRules plugin, I try the code above

CSS (We have to declare class & CSS Rules event if the css is empty)

.wrapper::before {
    content: 'hey';
    color: 'green';
}

HTML

<div >
</div>

JS (I have correctly imported the plugin)

gsap.registerPlugin(CSSRulePlugin);
const rule = CSSRulePlugin.getRule(".wrapper::before");

gsap.to(rule, {
  duration: 3,
    color: "orange",
    duration: 1,
    yoyo: true, 
    repeat: 20
});

I don't really know how to make this code works, if someone can help me please ?

CodePudding user response：

First of all you need to wrap all effect in cssRule object as mentionned here

const rule = CSSRulePlugin.getRule(".wrapper::before");

You write CSS Rule even if empty so it's ok, I just think that the issue is coming from cssRule property.

So you should write :

gsap.to(rule, {
  duration: 3,
  cssRule: {
    color: "orange",
    duration: 1,
    yoyo: true, 
    repeat: 20,
  }
});

It should works but as mentionned in the documentation you should NOT use this plugin since it became deprecated, you should use variable css that is supported by many browser now (it's why cssRulePlugin is deprecated)!

So you could just write this code

CSS

.wrapper::before {
  content: 'hey';
  color: var(--myColor);
}

And the JS

gsap.to(".wrapper", {
  "--myColor": "orange", 
  duration: 1,
  yoyo: true, 
  repeat: 20
});