Hello Everyone,
i have been trying to access the CSSRulePlugin in a component in my Nuxt project but it seems not to be responding. I have a pseudo :after class i'm trying to animate in my component.
Here's the snippet of my code
<script>
import { gsap } from 'gsap'
import { CSSRulePlugin } from 'gsap/all'
export default {
name: 'FirstSection',
mounted() {
const rule = CSSRulePlugin.getRule('.name:after')
const timeline = gsap.timeline({ defaults: { duration: 1 } })
console.log(timeline)
timeline
.from('.intro', { y: -50, stagger: 0.4, opacity: 0 }, '+=4')
.from('.tumi', { x: 50, opacity: 0 }, '-=1')
.to(rule, {
duration: 1.8,
cssRule: { scaleY: 0, opacity: 0 },
})
},
}
</script>
If theres a reason why the CSSRulePlugin is not responding as its meant to, i would love to know.....Thank you