Error when registering trial version of ScrollSmoother

[Squirello]

Hello, I'm new to GSAP and would like to try things out a bit before joining the premium club. 

Scrolltrigger works fine, but as soon as I'm registering the trial version of ScrollSmoother the site breaks down with this error message...

FetchError [ERR_NO_HANDLER]: No fetch handler defined and no upstream to proxy to specified.
Make sure you're exporting a default object containing a `fetch` function property.

 

It's a Remix project that I run on localhost and the plugins are registered like this...

import {ScrollTrigger} from 'gsap-trial/ScrollTrigger';

import {ScrollSmoother} from 'gsap-trial/ScrollSmoother';

gsap.registerPlugin( ScrollTrigger, ScrollSmoother);

 

@Cassie maybe you have an idea why the ScrollSmoother doesn't like me?

 

 

[ryan_labar]

I'm pretty sure the trial files are only designed to work on a few sites, like CodePen.
https://gsap.com/docs/v3/Plugins

[Squirello]

Thanks for your help  @ryan_labar . I had checked this before usage and in the documentation for the NPM package it says "The trial plugins only work locally and on certain approved domains like codesandbox.io, codepen.io, stackblitz.com, and jsfiddle.com.". This text made me understand that I should be able to run the package locally and so I gave it a go. The error though is not very helpful. 

 

https://www.npmjs.com/package/gsap-trial

 

[Rodrigo]

Hi @Squirello and welcome to the GSAP Forums!

 

This seems something more related to Remix than GSAP.

 

I've been trying to find a way to make it work locally without any success so far 😞

 

I'll keep looking into this and keep you posted.

 

Sorry for the inconveniences and please stand by.

Happy Tweening!

[ryan_labar]

28 minutes ago, Squirello said:

The trial plugins only work locally

Learned something new today! Hopfully @Rodrigo can find a fix for ya!

[Rodrigo]

Hi,

 

This seems more related to Remix than GSAP to me.

 

I tried locally and got error after error regardless of the import I used. For some reason in Remix I had to make a default import for every plugin (including the js extension 😐) in order to get a module which then I exported as a named export, something like this:

import ScrollSmoother from "gsap-trial/dist/ScrollSmoother.js";
import ScrollTrigger from "gsap-trial/dist/ScrollTrigger.js";

export const _sm = ScrollSmoother.ScrollSmoother;
export const _st = ScrollTrigger.ScrollTrigger;

Then in the index route file I added this:

import gsap from "gsap";
import { useGSAP } from "@gsap/react";

import { _sm as ScrollSmoother, _st as ScrollTrigger } from "app/exports/test";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

if (typeof document !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
}

export default function Index() {

  useGSAP(() => {
    ScrollSmoother.create({
      smooth: 1,
      effects: true,
    });
    gsap.to("img", {
      rotation: 360,
      ease: "none",
      scrollTrigger: {
        trigger: ".content",
        start: "top top",
        end: "+=100%",
        pin: true,
        scrub: true,
        markers: true,
      }
    });
  });

  return (
    <div id="smooth-wrapper">
      <div id="smooth-content">
        // Rest of your JSX here
      </div>
    </div>
  );
}

Here is a live demo:

https://stackblitz.com/edit/remix-run-remix-bdnlqt?file=app%2Froutes%2F_index.tsx,app%2Fexports%2Ftest.js

 

The pin doesn't work in Stackblitz but works as expected in local development.

 

Needless to say that this solution makes me very uncomfortable as it doesn't make a lot of sense. I tried a lot of different approaches without any success, but at least this will allow you to try the bonus plugins in your local environment.

 

We'll keep you posted if we find anything on this.

 

Happy Tweening!

[Rodrigo]

Hi,

 

I updated the demo that is working without the need of that funky workaround:

 

 

The solution was this:

https://remix.run/docs/en/main/file-conventions/remix-config#serverdependenciestobundle

 

The problem is that somewhere else in their docs they have the same configuration but using strings instead of regular expressions, so in this case using an array of regular expressions solves the problem.

 

The issue with the pinning is a different one, that it should be resolved in the next release.

 

We'll notify you about it.

 

Thanks for your patience 🙏

Happy Tweening!

[GreenSock]

39 minutes ago, Rodrigo said:

The issue with the pinning is a different one, that it should be resolved in the next release.

Just to be clear, the pinning issue is only happening on Stackblitz like that because you've got two different gsap objects being imported - one that's a dependency of the useGSAP() hook (normal "gsap"), and the other is the one that's in the "gsap-trial" package which is what you're using to create your tweens/timelines. 

 

This would never happen in a "normal" project where you're consistently importing from "gsap". The next release (due out very soon) will allow you to gsap.registerPlugin(useGSAP) which allows it to make sure it's using the same "gsap". 

 

And to be clear about what @Rodrigo was referencing there, you'd just need to add this to your remix.config.js file: 

serverDependenciesToBundle: [
    /^gsap-trial.*/,
    /^gsap.*/,
  ],

👍

[Squirello]

Thank you so much for all your help. Unfortunately, nothing has worked for me so far.  Sometimes I get the same error as before and sometimes there is this new error after adding the suggested code to remix.config.js

serverDependenciesToBundle: [
    /^gsap-trial.*/,
    /^gsap.*/,
  ],

 

The new error says...

Error: Some functionality, such as asynchronous I/O (fetch, Cache API, KV), timeouts (setTimeout, setInterval), and generating random values (crypto.getRandomValues, crypto.subtle.generateKey), can only be performed while handling a request.

 

@Rodrigo do you have problems no matter the plugin you try or is it only with ScrollSmooter? I can register ScrollTrigger in both trial and public versions without a problem. It's ScrollSmoother that breaks things for me when getting registered. 

[Squirello]

1 minute ago, Squirello said:

Thank you so much for all your help. Unfortunately, nothing has worked for me so far.  Sometimes I get the same error as before and sometimes there is this new error after adding the suggested code to remix.config.js

serverDependenciesToBundle: [
    /^gsap-trial.*/,
    /^gsap.*/,
  ],

 

The new error says...

Error: Some functionality, such as asynchronous I/O (fetch, Cache API, KV), timeouts (setTimeout, setInterval), and generating random values (crypto.getRandomValues, crypto.subtle.generateKey), can only be performed while handling a request.

 

@Rodrigo do you have problems no matter the plugin you try or is it only with ScrollSmooter? I can register ScrollTrigger in both trial and public versions without a problem. It's ScrollSmoother that breaks things for me when getting registered. 

I should clarify the code mentioned above can be added to remix.config without problem if only ScrollTrigger gets registered. ScrollSmoother makes my life less smooth so far though

[Rodrigo]

Hi,

 

I'm not getting any errors regardless of the GSAP plugin I register. This is how my remix.config.js file looks like:

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: [
    /^gsap-trial.*/,
    /^gsap.*/,
  ],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // publicPath: "/build/",
  // serverBuildPath: "build/index.js",
};

And this is how my routes/_index.tsx file looks like:

import type { MetaFunction } from "@remix-run/node";
import gsap from "gsap";
import { ScrollTrigger } from "gsap-trial/ScrollTrigger";
import { ScrollSmoother } from "gsap-trial/ScrollSmoother";
import { MorphSVGPlugin } from "gsap-trial/MorphSVGPlugin";
import { InertiaPlugin } from "gsap-trial/InertiaPlugin";
import { useGSAP } from "@gsap/react";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

if (typeof document !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother, MorphSVGPlugin, InertiaPlugin);
}

export default function Index() {

  useGSAP(() => {
    ScrollSmoother.create({
      smooth: 1,
      effects: true,
    });
    gsap.to("img", {
      rotation: 360,
      ease: "none",
      scrollTrigger: {
        trigger: ".content",
        start: "top top",
        end: "+=100%",
        pin: true,
        scrub: true,
        markers: true,
      }
    });
  });

  return (
    <div id="smooth-wrapper">
      <div id="smooth-content">
        <section className="section"></section>
        <section className="section content">
          <div className="img-container">
            <img src="https://images.unsplash.com/photo-1701986789751-d5891d8a8ab4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHx8" alt="img" />
          </div>
        </section>
        <section className="section"></section>
      </div>
    </div>
  );
}

And everything is working as expected on localhost 🤷‍♂️

 

Be sure to import gsap from the gsap-trial package and not gsap. For now installing the regular gsap package is necessary so the useGSAP Hook works, in the next release it won't be necessary.

 

Hopefully this helps.

Happy Tweening!

[Squirello]

My setup looks the same except for the remix.config where there are other settings because it's a Remix project using Hydrogen and connecting to Shopify. 

It still breaks. However, I tried to create a new clean Remix project and I can confirm it works there. 

 

It's a large project and I've never had this kind of issue with any other library, so it might become tricky to find the culprit, but I'll try. If I find a solution I'll let you know.

[Squirello]

1 hour ago, Squirello said:

My setup looks the same except for the remix.config where there are other settings because it's a Remix project using Hydrogen and connecting to Shopify. 

It still breaks. However, I tried to create a new clean Remix project and I can confirm it works there. 

 

It's a large project and I've never had this kind of issue with any other library, so it might become tricky to find the culprit, but I'll try. If I find a solution I'll let you know.

I  have now checked all free plugins and they all register just fine. It seems the problem is related to the premium versions since none of them work.

[Rodrigo]

1 hour ago, Squirello said:

It still breaks. However, I tried to create a new clean Remix project and I can confirm it works there. 

Yeah, this seems more related to what Hydrogen is doing more than a GSAP issue. Keep in mind that at the root of the body ScrollSmoother by default looks for this:

<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
    </div>
  </div>
  <!-- position: fixed elements can go outside --->
</body>

Now I can't really tell you what Hydrogen is doing to the DOM, but certainly is either creating something that ScrollSmoother is not expecting.

 

Although it seems more related to perhaps some code being executed in the server which is causing this, maybe give something here a try in order to import and register ScrollSmoother only in the client-side:

https://remix.run/docs/en/main/discussion/server-vs-client

 

Or perhaps this:

https://remix.run/docs/en/main/guides/constraints#initializing-browser-only-apis

 

As you can see in my previous post I'm registering the plugins only on the client:

if (typeof document !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother, MorphSVGPlugin, InertiaPlugin);
}

Or maybe try one of the suggestions here in order to import and register ScrollSmoother using dynamic imports:

https://github.com/remix-run/remix/discussions/2936

 

Unfortunately very little experience with remix and absolutely none with Hydrogen so I don't have a lot of ideas in this regard.

 

Hopefully this helps.

Happy Tweening!