Missing plugin? gsap.registerPlugin()

[AlexMKC 3 Likes (Newbie)]

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");

    }

  }, []);

 

[GreenSock 18,268 Likes (Superhero)]

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. 

[AlexMKC 3 Likes (Newbie)]

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>

 

[Yussuf Nergiz 0 Likes (Newbie)]

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()

            };

        })