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,
};