Registering CustomEase doesn't work when imported from /dist/ folder

[Max Hart]

I'm importing CustomEase from the dist folder to get around SSR / to prevent this error:

 

Cannot use import statement outside a module

 

However, despite registering the plugin after importing, i'm still given a warning message in my terminal that i need to register it. Register is working with the same approach for many other plugins, seems to just be specific to this one.

 

Here's my utility file where i'm handling all things GSAP:

 

// src/lib/gsap/index.tsx

import gsap from "gsap";
import { CustomEase } from "gsap/dist/CustomEase";
import { SplitText } from "gsap/dist/SplitText";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
import { TextPlugin } from "gsap/dist/TextPlugin";
import { GSDevTools } from "gsap/dist/GSDevTools";

gsap.registerPlugin(
  SplitText,
  ScrollTrigger,
  ScrambleTextPlugin,
  CustomEase,
  GSDevTools,
  TextPlugin,
);

const GOLDEN_RATIO = (1 + Math.sqrt(5)) / 2;
const RECIPROCAL_GR = 1 / GOLDEN_RATIO;
const DURATION = RECIPROCAL_GR;
const MICROSTAGGER = 0.05;
const STAGGER = 0.5;
const FADEDISTANCE = 100;
const EASE = CustomEase.create("ease", "0.175, 0.885, 0.32, 1");

// Configuring GSAP with custom settings that aren't Tween-specific
gsap.config({
  autoSleep: 60,
  nullTargetWarn: false,
});

// Setting default animation properties that should be inherited by ALL tweens
gsap.defaults({
  duration: DURATION,
  ease: EASE,
});

// Once the desired configurations are set, we simply export what we need to work with in the future.
export {
  DURATION,
  EASE,
  STAGGER,
  MICROSTAGGER,
  FADEDISTANCE,
  GOLDEN_RATIO,
  gsap,
  SplitText,
  ScrollTrigger,
  GSDevTools,
};

 

 

[GreenSock]

Hm, what is the exact message you're seeing in the console? Some of the plugins need there to be a valid window/document in order for them to properly register, so I wonder if you're getting that message because you're registering before there's a valid window/document. It's tough to troubleshoot blind, but that's my best guess. So maybe you'd just move your gsap.registerPlugin() call to where the code only executes in the browser rather than SSR? 

[Rodrigo]

Hi,

 

I assume that you're using NextJS for this, have you tried registering the plugins only on the client-side?:

if (typeof window !== "undefined") {
  gsap.registerPlugin(
    SplitText,
    ScrollTrigger,
    ScrambleTextPlugin,
    CustomEase,
    GSDevTools,
    TextPlugin,
  );
}

If that doesn't help, then we'll need a minimal demo, here is our NextJS starter template that you can fork and make it look like like your project:

https://stackblitz.com/edit/stackblitz-starters-3zkguu

 

Happy Tweening!