[CSSRulePlugin not properly working in useEffect( )]

 

  let ImageReveal = CSSRulePlugin.getRule('.img__container::after')

let tl = new TimelineLite()

  useEffect(() => {

    tl.to(container, 0, { css: { visibility: 'visible' } })

      .to(ImageReveal, 1.8, {

        width: '0%',

        ease: Power2.easeInOut,

      })

      .to(image, 1.4, { scale: '1.0', ease: Power2.easeInOut, delay: -1.6 })

  }, [ ])

 

I want ImageReveal pseudo element to have 0% width with animation once the component has been mounted. But whenever Im reloading the page , it is lagging too much, the width is becoming 0% but without any effect of animation.

 

Please help!