Jump to content
Search Community

How to load gsap script in Nextjs

noahtrotman test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi,

 

I am trying to load the gsap scripts in nextjs but I am having trouble. I've tried a few things but they all result in 'gsap not defined' in the component itself. I can't find a similar issue in the threads or elsewhere. 

 

Using Nextjs script tag:

//_app.js

import Script from "next/script";

function MyApp(){
  ...
  return (
    <>
     <Script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" />
     <Script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Observer.min.js" />
    ...
    <>

 

Using regular script tag:

//_document.js

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          ...
      	<script
            src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"
            async
          ></script>
          <script
            src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Observer.min.js"
            async
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }

 

Link to comment
Share on other sites

Hi,

 

What you can do is check if you're on the server or on the client. Using script tags for this could result that the GSAP files might not be loaded on the server, hence throwing those errors.

 

if (typeof window !== "undefined") {
  // We're on the client and GSAP should be defined globally
}

Sorry I can't be of more assistance, but I've never been in this particular situation, given that GSAP's KB weight is not really a lot minified and gziped.

 

Happy Tweening!

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