Jump to content

Ash Shahi

  • Posts

  • Joined

  • Last visited

Ash Shahi's Achievements


Newbie (1/14)



  1. 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
  2. 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 and in Firefox I get Is it time stop using this plugin or is there a way around this? Thanks