Depoloyed site - Invalid property Missing plugin? gsap.registerPlugin()

[monixm]

Hello, I just deployed my site via Netlify and all my animations (used TweenMax & TimelineLite) are not displayed at all. In the dev tool I can see: gsap-core.js:83 Invalid property set to  Missing plugin? gsap.registerPlugin() errors. This is the first time I am using gsap and deploying a site with it and I'm new to coding, so any clear advice on what's happening would be great. Thank you in advance. 

[elegantseagulls]

Hi @monixm,

 

It looks like you are using the old GSAP 2 syntax, but are importing the GSAP 3 javascript. I'd check your package.json file to make sure netlify knows which version of GSAP to import, or convert your code to the new GSAP 3 syntax (GSAP 3 is a much smaller file size!).

[monixm]

You are the best, thank you for this tip, it worked  yupppiiii

[ZachSaucier]

For reference, you can still use the GSAP 2 syntax if you'd like, you just have to make sure that it's not tree shaken by registering the parts. Our Install Helper can help you get all the registering you need.

[vansh bajaj]

I had the same problem Can you please help me

 

import Name from "./Name";

import gsap from "gsap";

import { useLayoutEffect } from "react";

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

 

const Home = () => {

  const text1 = Array.from("I'm ");

  const text2 = Array.from("Vansh");

  const text3 = Array.from(" bajaj");

 

  useLayoutEffect(() => {

    const ctx = gsap.context(() => {

      gsap.utils.toArray("#home").forEach((home) => {

        console.log(home.offsetWidth);

        // console.log(gsap.utils.("#home"));

        gsap.fromTo(

          home,

          {

            opacity: 1,

          },

          {

            opacity: 0,

           

           

            scrollTrigger: {

              trigger: home,

              // markers: true,

              start: "center center",

              end: () => "+=" + (home.offsetHeight * 2),

              scrub: true,

              pin: true,

              pinSpacing: false,

            },

          }

        );

      });

    });

 

    return () => {

      ctx.revert();

    };

  }, []);

  return (

    <div className="myInfo-container section" id="home">

      <div className="bgImg">

        <img src="Images/IMG_1337.jpg" alt="my pic" />

      </div>

      <div className="nameTextDiv">

        <h1 className="green">Hii</h1>

        <h1>

          <span>

            {text1.map((ch, index) => {

              return <Name char={ch} key={index} />;

            })}

          </span>

          <span>

            {text2.map((ch, index) => {

              return <Name char={ch} key={index} />;

            })}

          </span>

          <span>

            {text3.map((ch, index) => {

              return <Name char={ch} key={index} />;

            })}

          </span>

        </h1>

        <p>Full stack web developer</p>

      </div>

    </div>

  );

};

 

export default Home;

[GSAP Helper]

@vansh bajaj It's pretty tough to troubleshoot without a minimal demo - Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. 

 

You could try moving your gsap.registerPlugin(ScrollTrigger) inside the useLayoutEffect() if you're in an SSR environment. Also make sure you're using the latest version (at least 3.11.5). If none of that helps, try importing from the /dist/ directory to get UMD files, like import ScrollTrigger from "gsap/dist/ScrollTrigger";

 

It was a little odd that you did a gsap.utils.toArray("#home").forEach(...) because there's only one such element. Not "wrong" - just odd. 

 

Here's a React starter template you can fork

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi,

 

As per the register plugin part, just in case your effect hook runs more than once because of any re-render or you have a component that is used more than once, the reigsterPlugin method will run more than once. Is better to keep it in the place you have it right now and do a simple check for the window object:

// With SSR (Gatsby/Next/Other)
if (typeof window !== "undefined"){
  gsap.registerPlugin(ScrollTrigger);
}

// Without SSR
gsap.registerPlugin(ScrollTrigger);

Happy Tweening!