[CSSRulePlugin not responding in Nuxt Js]

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