Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Ibad Shaikh

CSSRulePlugin not properly working in useEffect( )

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 post
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 post
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.