CSSRulePlugin not properly working in useEffect( )

[Ibad Shaikh]

 

  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!

[ZachSaucier]

Hey Ibad and welcome to the GreenSock forums. It's really hard for to help with only the code that you've provided. Can you please create a minimal demo of the issue? 

 

Also note that we recommend using actual elements or CSS variables instead of using the CSSRulePlugin in most cases.

 

We also recommend that you use GSAP 3 syntax which you can learn about here: