Jump to content

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

CSSRulePlugin not available through npm?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

From reading NPMUsage docs and inspecting the available exports in gsap npm package, CSSRulePlugin does not seem to be made available.

Is there a specific reason for this, or is this planning to be released sometime in the future?


My goal is to latch onto pseudo elements like :after and :before.


Is there another way to do this with GSAP?

On a side note, I'm quite new to GSAP, and I'm trying to incorporate GSAP into a SSR Vue app (Nuxt).


Thanks in advance!

Link to comment
Share on other sites

First of all, welcome to the forums (and GSAP), @madleo


I'm not quite sure what you mean by "CSSRulePlugin does not seem to be made available." Are you importing it like this?:

import CSSRulePlugin from "gsap/CSSRulePlugin";


Or if you prefer, you could do this:

import { CSSRulePlugin } from "gsap/all";


Does that help? 

  • Like 2
Link to comment
Share on other sites

Thanks for the welcome!


No luck just yet.

From server side, I'm getting 


"export 'CSSRulePlugin' was not found in 'gsap'


I'm thinking this might be related to SSR? If so, might be Vue/Nuxt config I have to setup correctly, to which I'll try and figure out outside of this thread.

Just to be clear though, I'm trying to use CSSRulePlugin within the context of npm. 

Link to comment
Share on other sites

Hm, it sounds like you're doing this:

import { CSSRulePlugin } from "gsap";

import CSSRulePlugin from "gsap/CSSRulePlugin";


If I'm wrong, would you please post the EXACT import statement you're using? Or even better, a reduced test case that we could run?


Also, what version of GSAP are you using? Hopefully the latest (2.0.2)

  • Like 1
Link to comment
Share on other sites

Sorry about the limited info, I've got it to work though thanks to you guys! 

In my case, it was Nuxt (SSR) related. 


if(process.browser) {
  CSSRulePlugin = require("gsap/CSSRulePlugin")


Thanks again!!

  • Like 2
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.