Jump to content
Search Community

Missing plugin? gsap.registerPlugin()

AlexMKC test
Moderator Tag

Recommended Posts

My project works perfectly in the build, but when deploying it to a live website, gsap is having errors:

 

Invalid property scrollTrigger set to Object

Missing plugin? gsap.registerPlugin()

 

I'm using the gsap 3.11

 

My code looks like this, is there any obvious issue here? Again, it works perfectly in the build...

 

import React, { useState, useEffect, useRef } from "react";
import "./Home.css";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
import { Link, useLocation } from "react-router-dom";
import { useMediaQuery, useTheme } from "@material-ui/core";

 

  useEffect(() => {
    gsap.to("body", {
      backgroundColor: "black",
      scrollTrigger: {
        toggleActions: "play pause resume reverse",
        trigger: backColor.current,
        start: "top center",
        markers: true,
      },
    });
    gsap.to(".fontStyle", {
      color: "#f9cdcd",
      scrollTrigger: {
        toggleActions: "play pause resume reverse",
        trigger: backColor.current,
        start: "top center",
      },
    });
 
    if (location.state?.scrolled) {
      scrollFun("projects");
    }
  }, []);

 

Link to comment
Share on other sites

I don't notice any problems from that snippet, but clearly your build tool is tree shaking ScrollTrigger (dropping it out of your build). Very tough to diagnose with just a snippet, but that error definitely means that ScrollTrigger isn't there. Maybe try moving gsap.registerPlugin(ScrollTrigger) inside of your useEffect()? That really shouldn't be necessary, but I'd try it. 

  • Like 1
Link to comment
Share on other sites

What solved my problem is importing  gsap as...

 

import { gsap, ScrollTrigger } from "gsap/all";

 

and removing the following gsap scripts from my index.html file

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

 

Link to comment
Share on other sites

  • 6 months later...

I have the exact same problem, all of my animations that were suppose to start with a ScrollTrigger just plays as soon as the page loads.

 

I am using React, GSAP and LocomotiveScroll, everything seems to work perfectly fine on build, however, when deploying to vercel the ScrollTrigger is no longer recongnized.

 

I've tried to add gsap.registerPlugin(ScrollTrigger) to all of my useEffects() and imported everything from "gsap/all" but to no avail.

 

This is the error message I get:

react_devtools_backend.js:2655 Invalid property scrollTrigger set to {trigger: div, start: 'top center', end: 'bottom bottom', scroller: '#main-container', scrub: true} Missing plugin? gsap.registerPlugin()

 

 

useLocoScroll();
 
        const mainRef = useRef();
 
        useEffect(() => {
 
            gsap.registerPlugin(ScrollTrigger);
           
            const ctx = gsap.context(() => {
                gsap.fromTo('#curtainTop', {
                    y: "-50vh"
                    }, {
                        y: "50vh",
                        ease: 'none',
                        scrollTrigger: {
                        trigger : '#main',
                        start: 0,
                        end: '+=50%',
                        scrub: true,
                        scroller: "#main-container",
                        lazy: false
                    }
                })
   
                gsap.fromTo('#curtainBottom', {
                    y: "50vh"
                },
                {
                    y: 0,
                    ease: 'none',
                    scrollTrigger: {
                    trigger : '#main',
                    start: 0,
                    end: '+=50%',
                    scrub: true,
                    scroller: "#main-container",
                    lazy: false  
                    }
                })
   
                gsap.to('#main', {
                    opacity: 0,
                    zIndex: -1,
                    ease: 'none',
                    scrollTrigger: {
                    trigger : '#main',
                    start: 0,
                    end: '+=50%',
                    scrub: true,
                    scroller: "#main-container",
                    lazy: false  
                }
                })
            })
            return () => {
                ctx.revert()
            };
        })
  • Like 1
Link to comment
Share on other sites

  • 4 months later...
  • 4 months later...
On 7/18/2023 at 4:56 PM, GreenSock said:

@psfortuna it sounds like you forgot to register ScrollTrigger. 

gsap.registerPlugin(ScrollTrigger);

If you're still having trouble, please make sure you provide a minimal demo that clearly illustrates the issue and we'd be happy to take a look.

Hi, and sorry for the lame question.
I want to register the MorphSVG plugin, but don't know how to do it. I dont use react, or anything, just handcode my banners with Subline Tetx, and want to include the MorphSVGPlugin in my script folder next to the banner I provide to the Google Ads.
Can somebody help me? Thanks in advance

 

Link to comment
Share on other sites

Nah, it's not a lame question! And thanks for being a Club GSAP member! 💚

 

You could just literally copy/paste the minified code from the MorphSVGPlugin.min.js file directly into your codebase (above your custom JS). That file is in your zip download ("minified" folder). Or load it in as a separate <script src="MorphSVGPlugin.min.js"></script>. Doesn't really matter - whatever you find more convenient. 

 

Good luck!

Link to comment
Share on other sites

That just means you forgot to register the plugin. 

// ...paste MorphSVGPlugin.min.js code here...
gsap.registerPlugin(MorphSVGPlugin);

// ...the rest of your GSAP code here that's leveraging MorphSVGPlugin...

Did you load GSAP first? 

 

It's super difficult to troubleshoot blind, but hopefully this will get you on your way.

Link to comment
Share on other sites

hi 
yes I loaded GSAP from the cdn
https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.11.1_min.js
 

What does it mean BWT?:
// ...paste MorphSVGPlugin.min.js code here...

 

I simply use a timeline, than I want to use a MorphSVG plugin, like this:
.to(text0Alap, _DELAY, {morphSVG: text0Alap_TO, ease:BACKINOUT}, 'p2')

and thats it.

thanks in advance :)
 

Link to comment
Share on other sites

In order to have morphSVG: ... work in your animation, you MUST have MorphSVGPlugin loaded. It sounds like you never loaded it. 

 

So you can either use it as an external file (grab it from your zip download of GSAP), loading it via a normal <script> tag, -or- you could literally copy/paste the raw minified source code of MorphSVGPlugin.min.js directly into your JavaScript payload (as if you wrote that). Open MorphSVGPlugin.min.js, select-all, copy, and then paste that ABOVE your own JavaScript code where you do your tweens. 

 

MorphSVGPlugin is just raw JavaScript code anyway. That's why it's fine to just paste it into your JS code. 

 

If you still can't get it working, you can zip up your files and send them to me directly in a private message or something (DON'T post it here in the public forums, or else you'll be giving everyone free access to a members-only plugin). 

Link to comment
Share on other sites

  • 2 months later...
On 8/29/2022 at 12:17 AM, AlexMKC said:

My project works perfectly in the build, but when deploying it to a live website, gsap is having errors:

 

Invalid property scrollTrigger set to Object

Missing plugin? gsap.registerPlugin()

 

I'm using the gsap 3.11

 

My code looks like this, is there any obvious issue here? Again, it works perfectly in the build...

 

import React, { useState, useEffect, useRef } from "react";
import "./Home.css";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
import { Link, useLocation } from "react-router-dom";
import { useMediaQuery, useTheme } from "@material-ui/core";

 

  useEffect(() => {
    gsap.to("body", {
      backgroundColor: "black",
      scrollTrigger: {
        toggleActions: "play pause resume reverse",
        trigger: backColor.current,
        start: "top center",
        markers: true,
      },
    });
    gsap.to(".fontStyle", {
      color: "#f9cdcd",
      scrollTrigger: {
        toggleActions: "play pause resume reverse",
        trigger: backColor.current,
        start: "top center",
      },
    });
 
    if (location.state?.scrolled) {
      scrollFun("projects");
    }
  }, []);

 

Im having the same exact issue

Link to comment
Share on other sites

No obvious issue there, no.

It looks like you're registering ScrollTrigger. I wonder if the issue is somewhere else in your code. It would be great to see a minimal demo.

Also - FYI

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

  • Like 1
Link to comment
Share on other sites

The only other time I've seen this is when someone loaded BOTH the ESM version of GSAP (like via an import) -AND- the UMD version (like via a <script> tag). 

 

If you can provide a minimal demo that clearly illustrates the issue, we'd be happy to take a look.

 

You can also try importing from the /dist/ directory, like "gsap/dist/ScrollTrigger" just to see if that helps at all. Ideally, it's best to just use the regular ESM files but some frameworks like Next.js don't work by default with ESM files (though I think you can tweak your config settings to have it transpile so that you can use the ESM files) 

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...