Jump to content
Search Community

CSSRulePlugin not properly working in useEffect( )

Ibad Shaikh test
Moderator Tag

Recommended Posts

  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!

Link to comment
Share on other sites

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:


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...