Jump to content
Search Community

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

sadeghbarati test
Moderator Tag

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

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 5
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.
×
×
  • Create New...