How to select ::after pseudo class

[Sabz]

Hello guys, 

I'm currently working on an exciting image reveal animation for my Next.js and GSAP project. To achieve this, I've utilized the CSSRulePlugin to target the ::after class. Surprisingly, the animation works flawlessly on my localhost:3000, but unfortunately, I encountered an error after deploying the project.

 

For your convenience, I've created a Codepen that demonstrates the exact implementation I've used. Additionally, I've attached some screenshots showcasing the encountered errors.

 

I have this warning on my localhost:3000 (but everything is working fine on localhost):

 

And here are the output and errors after the deployment:

(output)

(browser console)

 

I've also done some research, but I couldn't find any specific Next.js support addressing this particular issue. If anyone has encountered a similar problem or has any insights into resolving it, I would greatly appreciate your input.

 

Thank you all for your time and assistance.

Best regards,
Sabbir

See the Pen dyQRxPb by sabbirzzaman (@sabbirzzaman) on CodePen

[Rodrigo]

Hi,

 

The CSSRule plugin has been deprecated in favour of using CSS variables now, as stated in the plugin's docs:

 

https://greensock.com/docs/v3/Plugins/CSSRulePlugin

 

Take a peek at the example there in order to update your code.

 

Hopefully this helps.

Happy Tweening!

[Sabz]

Hi @Rodrigo, Thanks for sharing the docs. But I've already read that doc before. It says CSSRulePlugin has been deprecated in favor of using CSS variables. But I'm not trying to select a CSS variable. I need to select a pseudo-class (::after). And I'm using the exactly same thing according to the documentation. 

I'm also using the same method:

 

But I'm getting those errors that I mentioned earlier. Could you please help me identify the issue? Thanks.

[Sabz]

***Update***

 

Hello guys, I've found another solution. I'm using clip-path instead of using pseudo-classes. That's I don't need to use the CSSRulePlugin anymore. And my problem is now solved.