[CSSRulePlugin not longer works]

2 minutes ago, GreenSock said:

Hm, got a codepen demo? That'd really help. What version? 

 

I'm developing it locally, with vue and webpack. I've pulled the latest version from npm:

 

npm install gsap --save-dev


import { TweenMax, CSSPlugin, TimelineMax } from "gsap/all";

 

I've seen this example working in your codepen  examples but when I copy your examples into my app both chrome and firefox block access to the DOM elements.

 

<template>
  <div class="intro">
    <div ref="stars" class="stars"></div>
  </div>
</template>

<script>
import { TweenMax, CSSPlugin, TimelineMax } from "gsap/all";

export default {
  name: "Intro",
  data() {
    return {
      images: {
        stardust: require("@/assets/images/stardust.png")
      }
    };
  },
  mounted() {
    // const { stars } = this.$refs;
    // const introAnimation = new TimelineMax();
    // introAnimation.to(stars, 8, { y: -1300 });

    const rule = CSSRulePlugin.getRule(".stars:before"); //get the rule
    TweenLite.to(rule, 3, { cssRule: { color: "red" } });
  }
};
</script>

 

I've attached a screenshot.

 

Could this be related to this issue on stackoverflow? 

https://stackoverflow.com/questions/49088507/cannot-access-rules-in-external-cssstylesheet

 

Thanks

[CSSRulePlugin not longer works]

Hi,

 

I have the following code:

var rule = CSSRulePlugin.getRule(".myClass:before"); //get the rule
TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});

 

But it looks like it is being blocked by the newer versions of chrome and Firefox. 

In chrome I get 

Quote

Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

 

and in Firefox I get 

Quote

DOMException: "The operation is insecure.

 

Is it time stop using this plugin or is there a way around this?

 

Thanks