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