Jump to content
GreenSock

AlexMKC

Missing plugin? gsap.registerPlugin()

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

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