Jump to content
Search Community

GSAP ScrollTrigger is not recognized after site deployment in vercel.

Yussuf Nergiz test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I've built a React site with GSAP and LocomotiveScroll, and added a bunch of ScrollTriggers. Everything works fine and as expected in my local machine, however, when I deploy the site into vercel all the animations that were suppose to get triggered with ScrollTrigger immediately start animating as soon as the page loads.

 

I've seen some other forums with the same problem, however, none of those solutions have worked for me like changing .from() into .fromTo() or calling gsap.registerPlugin(ScrollTrigger) inside useEffects() of every page with a ScrollTrigger animation or adding "lazy: false".

 

I get a this below error in all the pages that has a ScrollTrigger:

 

react_devtools_backend.js:2655 Invalid property scrollTrigger set to {trigger: '#main', start: 0, end: '+=50%', scrub: true, scroller: '#main-container', …}end: "+=50%"lazy: falsescroller: "#main-container"scrub: truestart: 0trigger: "#main"[[Prototype]]: Object Missing plugin? gsap.registerPlugin()

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

almost all of the pages with a ScrollTrigger has a code like this:

 

const Skills = () => {
 
    useLocoScroll();
 
    const mainRef = useRef();
 
    useEffect(() => {
 
        gsap.registerPlugin(ScrollTrigger);
 
        const ctx = gsap.context(() => {
            gsap.from("#curtain", {
                duration: 10,
                x: "-100vw",
                ease: Power4.ease,
                scrollTrigger: {
                    trigger: mainRef.current,
                    start: "top top",
                    end: "bottom center",
                    scrub: true,
                    scroller: "#main-container",
                    toggleActions: "play none none reverse"
                }
            })
 
        }, mainRef)
 
        return () => ctx.revert();
 
    }, [])
 
    return (
        <>
            <div style={{position: "relative", overflow: "hidden"}}>
                <div style={{position: "relative", overflow: "hidden", height: "100vh"}} ref={mainRef}>
                    <div className={styles.curtain} id="curtain"></div>
                    <div className={styles.pageTransitionBlack} id="main">
                        <Navbar />
                        <Header headerText={"My Skills"}/>
                    </div>
                </div>  
            </div>
        </>
    );
}
 
export default Skills;

errr.PNG

Link to comment
Share on other sites

Hi,

 

I'm not in front of my computer right now so there's not a lot I can offer.

 

There are two possible reasons I can think of. One is that the plugin registration is not taking effect before creating the ScrollTrigger instances. For that import and register the plugins at your entry index.js file and not on every useEffect hook, that is most definitely not necessary. The other is that some of the selectors you're using doesn't exist.

 

Another thing you could try is to create a production build on your local machine and see how that works.

 

Finally try to not post in many threads, just creating one is enough to get a response.

 

Happy Tweening!

Link to comment
Share on other sites

Yeah, it's super difficult to troubleshoot by just looking at a screenshot of a tiny portion of your code, but that error certainly seems to indicate that ScrollTrigger is NOT registered before you're creating animations that use ScrollTriggers. Maybe you're importing the wrong ScrollTrigger (like not from GSAP - for example, this)? Are you importing from "gsap/ScrollTrigger"? 

 

Also, a few minor notes about your code: 

  • There's no such thing as ease: Power4.ease. I'd strongly recommend using the modern string syntax, like ease: "power4.out"
  • You used mainRef as your selector scope parameter in the gsap.context() which means any selector text inside your context function will only search for children of that element, but you set scroller: "#main-container" which I don't see as a child of mainRef, so that won't really work. It won't find that element, thus it'll default to using the root/body. So either don't define the scope selector parameter, or reference your scroller a different way, like with a ref.current or whatever. 
  • I noticed you've got scrub: true AND toggleActions. Those are logically mutually exclusive. If you set a scrub value, then your toggleActions will be ignored. You can't scrub and also have it play independently of the scroll position. 
  • In most cases it doesn't matter much, but typically it's best to use useLayoutEffect() instead of useEffect().

If you still need help, please provide a stackblitz minimal demo so we can see the problem in context. It doesn't need to be your "real" project - just the simplest thing to show the problem actually happening. Here's a starter template you can fork

Link to comment
Share on other sites

1) Hi, Thank you for the quick responses. So I've tried to call gsap.registerPlugin(ScrollTrigger) in index.js but it did not solve the issue unfortunately.

2) The problem also accurs in production build in my local machine.

 

3) The scroller: "#main-container" inside the scrollTrigger is for the locomotive scroll, and without it the animations don't even work in developement.

4) I've also tried to deploy the site by removing the Locomotive Scroll, however, nothings changed. The main problem rn is that all the animations tiggered with ScrollTrigger  starts playing as soon as the page loads, and I get the below error in the console.

--

Invalid property scrollTrigger set to {trigger: div.styles_certContainer__vzU0O, start: 'top top', end: '+=50%', scrub: true, toggleActions: 'play none none reverse'}end: "+=50%"scrub: truestart: "top top"toggleActions: "play none none reverse"trigger: div.styles_certContainer__vzU0O[[Prototype]]: Object Missing plugin? gsap.registerPlugin()

--

 

5) I've added these cdn links to the very top of my <head> tag in index.html but nothing changed.

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

 

I am pretty new to gsap and web dev in general so the codesand that I've created might be completely useless but here it is.

https://codesandbox.io/s/nice-forest-mb8g7e

 

 

Here is the github link for the whole code if its needed.

https://github.com/YusufNergiz/PortfolioSite

 

Thanks in advance.

Link to comment
Share on other sites

Hi,

 

Just register ScrollTrigger in the App.js file, not in a useEffect hook, outside the scope of the functional component:



import { BrowserRouter } from 'react-router-dom';
import './App.css';
import AnimatedRoutes from './components/AnimatedRoutes/AnimatedRoutes';
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from 'react-toastify';
import { useEffect } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

function App() {

  return (
    <div className='App'>
      <BrowserRouter>
        <ToastContainer />
        <AnimatedRoutes />
      </BrowserRouter>
    </div>
  );
}

export default App;

And that should be enough, you don't need to register the plugin anywhere in any other file.

 

Also I'm seeing a lot of this:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    gsap.timeline()
      .fromTo("#pageTransitionCream", {duration: 2.2, scaleX: 0}, {scaleX: 1, transformOrigin:'left', ease: Power4.easeInOut},)
      .fromTo("#pageTransitionWhite", {duration: 2.2, scaleX: 0}, {scaleX: 1, transformOrigin: 'left', ease: Power4.easeInOut}, .2)
      .fromTo("#pageTransitionLogo", {duration: 1.6, xPercent: -100, autoAlpha: 0}, {xPercent: 0, autoAlpha: 1, ease: Power4.easeInOut}, .7)
      .to("#pageTransitionCream", {duration: 2.2, scaleX: 0, transformOrigin: 'right', ease: Power4.easeInOut})
      .to("#pageTransitionLogo", {duration: .2, autoAlpha: 0}, '-=1.2')
      .fromTo(".wrapper", {duration: 1, opacity: 0, y: 100}, {opacity: 1, y: 0, ease: Power4.easeInOut})
      .fromTo("#squirrel", {duration: 1, opacity: 0, y: -100}, {opacity: 1, y: 0, ease: Power4.easeInOut})
  }, loadingPageRef)

  return () => {
    ctx.revert()
    ScrollTrigger.killAll()
  };

}, [])

Since this is a single page app with no routing, why are you killing all the ScrollTrigger instances after running the revert method on the GSAP Context file? Try removing that as well and just keep the revert() method on every component.

 

Give that a try and let us know how it goes.

Happy Tweening!

Link to comment
Share on other sites

  • Solution

I'm not seeing that error in your CodeSandbox at all. Am I missing something? 

 

In addition to Rodrigo's advice, I noticed: 

  1. ease: "power4.ease" isn't a thing. Maybe you meant "power4.out"? 
  2. LocomotiveScroll apparently changed their API in version 4 (that is NOT a GreenSock product, so we can't support it here), so you'll probably need to change your useLocoScroll() code.
    // old
    locoScroll.scrollTo(value, 0, 0)
    
    // new
    locoScroll.scrollTo(value, { duration: 0, disableLerp: true })

     

  3. You have this on your ScrollTrigger: 
    start: "top top",
    end: "bottom bottom",

    But that element is 100vh tall, so that effectively means your ScrollTrigger ends as soon as it starts (the top of the trigger hits the top of the viewport at the same time the bottom hits the bottom of the viewport).  I'm not sure what you're trying to do there. 
  4. As I said earlier, you defined a selector scope variable that won't be able to find your root level scroller. It's not a child of that element. 

I'm really not sure what you intended that demo to do, but I just did a very quick fork to fix the low-hanging fruit, so maybe it'll get you going in a better direction: 

https://codesandbox.io/s/solitary-cdn-3ts9n4?file=/src/App.js

 

If you still have trouble, please make sure you provide a demo that's clearly showing the error message you're encountering and we'd be glad to take a peek. 

Link to comment
Share on other sites

Hello, I apologise for the unclear sandbox. I'll try to create a minimal demo of it with the actual warning, however, like I said the warnings and the bug only occurs in production mode, so I dont know how to show it in sandbox.

 

In the meantime here is a deployed version of my site in vercel, after clicking any one of the shapes (except the white one) and open the console, you will see the warning message.

 

https://portfolio-site-4vot.vercel.app/

Link to comment
Share on other sites

I went to that link and immediately it only showed this error in the console:

Uncaught SyntaxError: Unexpected token '<' (at vanilla-tilt.js:1:1)

 

I do see the warnings about ScrollTrigger (at first I didn't because I had warnings turned off in my console), but it's extremely difficult to troubleshoot a live site. I glanced at a few chunks of code and saw this: 

useEffect(() => {
  gsap.registerPlugin(ScrollTrigger);
}, [])

useLayoutEffect(() => { ... }, [])

 

But from my understanding, React usually runs the useLayoutEffect() first, so if you're registering the plugin in the useEffect(), it may not happen in time. Why didn't you just put it inside the useLayoutEffect()? I would try that. 

 

I do love this quote from the page: "Got addicted to using GSAP for fast and smooth page animations." ? :)

Link to comment
Share on other sites

How stupid of me ?, after commenting out every code related to Locomotive Scroll the problem got solved. So the problem was because of the Locomotive Scroll afterall nothing to do with gsap, my apologies...

 

Thank you guys for all the help, really appreciate it.

 

Here is the working version of the site (without smooth scrolling of locomotive scroll).

https://portfolio-site-4vot-a4u92xrhv-yusufnergiz.vercel.app/

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