lrvaka

December 29, 2022

13 minutes ago, GSAP Helper said:

GSAP needs the document and window to be defined in order to function. It sounds like you've put your gsap.registerPlugin() in a place in your code where those things don't exist yet (server side rendering I assume). So just move the gsap.registerPlugin() to where you're sure those things will exist. For example, in a lifecycle method. I'm not familiar with Next, but basically wherever you've put your actual GSAP code, like gsap.to(...) - that's probably a safe place to do the registration. Just make sure you call the gsap.registerPlugin() before you actually create any tweens or split text, that's all.

If you still have trouble, here's a Next starter template that you can fork on Stackblitz.

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

Thanks for the response - however I see that the starter templates that are referenced have the gsap.registerPlugin() not inside of a lifecycle method, but how I have it in my example - it seems that latest version of NextJS 13.0.7 breaks this 🤷‍♂️

December 29, 2022

Currently running NextJS 13.0.7 - trying to registerPlugin but I get the following error "ReferenceError: document is not defined". I have another project running 12.3.1 that allows me to registerPlugin. I've seen a few examples of registerPlugin being used in the forums on NextJS 13.0 so I'm unsure as to what is causing this problem exactly.

import { gsap } from "gsap";

import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin";

import { SplitText } from "gsap/dist/SplitText";

gsap.registerPlugin(DrawSVGPlugin, SplitText);

export default function Home() {

return (

<>

<Head>

<title>Create Next App</title>

</Head>

<main>

<CTA />

</main>

</>

);

}

Notifications

Messages

lrvaka

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by lrvaka

NextJS - registerPlugin(...) leading to "ReferenceError: document is not defined"

NextJS - registerPlugin(...) leading to "ReferenceError: document is not defined"