Jump to content
GreenSock

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

How To registerPlugin in React or Gatsby ( gsap v3.3.4 )

Recommended Posts

Hello I have question about how to use gsap in React and Specially in Gatsby

I have installed gsap new version with npm install ./gsap-bonus.tgz

In my gatsby-browser.js I define all plugins Globaly so use all those features without import them in another files
only gsap.to() works

here is my gatsby-browser.js:
 

/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/browser-apis/
 */

// You can delete this file if you're not using it
import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger";
import CSSRulePlugin from "gsap/CSSRulePlugin";
import CSSPlugin from "gsap/CSSPlugin"


gsap.registerPlugin(ScrollTrigger, CSSPlugin, CSSRulePlugin); 

Pls help or update GreenSock React Tutorial  and GreenSock NpmUsage :'(

Link to comment
Share on other sites

Hey sadeghbarati. You should use the GSAP 3 installation docs. There's even a handy install helper that can generate the code for you. You don't need to register CSSPlugin as it's part of GSAP's core. 

 

Besides that, please recreate the error using CodeSandbox or something.

 

  • Like 1
Link to comment
Share on other sites

sry i dont see that link that solve my problem thanks

Link to comment
Share on other sites

Read gatsby's docs.

https://www.gatsbyjs.org/docs/debugging-html-builds/

 

Quote

Some of your code references “browser globals” like window or document. If this is your problem you should see an error above like “window is not defined”. To fix this, find the offending code and either a) check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or b) if the code is in the render function of a React.js component, move that code into a componentDidMount lifecycle or into a useEffect hook, which ensures the code doesn’t run unless it’s in the browser.

 

You need to check if window is defined, or move it into componentDidMount or useEffect hook.

 

import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, CSSRulePlugin); 
}

 

  • Like 4
Link to comment
Share on other sites

  • 6 months later...

Hello, I am piggy backing on this thread as I have a similar issue, trying to use the CSSRulePlugin with React.  The above answer references the install guide, and also says that the plugin does not need to be registered.  Yet on the install page, the code ready to copy is:
 

import { gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";

gsap.registerPlugin(CSSRulePlugin);
 

 

 

Link to comment
Share on other sites

5 hours ago, bentleybuilds said:

and also says that the plugin does not need to be registered.

Hm, I think you may have misread - Zach said CSSPlugin is part of the core (thus it doesn't need to be registered), but you're trying to use CSSRulePlugin, right? That is NOT part of the core, so it needs to be registered (as Blake showed). 

 

Does that clear things up? 

  • Like 3
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.
×