Next.js and GSAP 3

[KevinJ 4 Likes (Newbie)]

Hi All,

 

I'm about to pull the trigger on joining Club Greensock.

 

While I understand support isn't offered for non-greensock products, I've struggled with figuring out how to get gsap to work in my next.js project I'm working on.

 

With that said, can someone point me in the direction of getting gsap working for with Next.js please.

 

KJ

[ZachSaucier 7,130 Likes (Superhero)]

Hey Kevin! 

 

38 minutes ago, KevinJ said:

I'm about to pull the trigger on joining Club Greensock.

That's great! We hope you do  We can't do the work that we do without Club GreenSock members.

 

38 minutes ago, KevinJ said:

I've struggled with figuring out how to get gsap to work in my next.js project I'm working on.

 

With that said, can someone point me in the direction of getting gsap working for with Next.js please.

We'd be happy to. In fact we're working on tool that will hopefully be released in the next week that will make importing GSAP and its parts into your project even easier. Right now the "Installation" page will have to suffice.

 

I haven't used Next.js, but it seems to use the standard way of importing modules. You should be able to install GSAP (without club member plugins) by doing the standard npm install gsap. Then you should be able to include the core of GSAP by including import { gsap } from "gsap"; at the top of your script that uses GSAP. Otherwise try importing the UMD files instead: import { gsap } from "gsap/dist/gsap";

 

Let us know if that doesn't work for you.

[OSUblake 18,475 Likes (Superhero)]

Next.js is just like Nuxt.js, so try using the umd modules as shown here.

 

 

 

 

And it looks like there is a plugin to transpile modules.

https://github.com/martpie/next-transpile-modules

 

 

[KevinJ 4 Likes (Newbie)]

Thanks for the response @ZachSaucier and @OSUblake. Here is what I'm getting:

Here is what I did:

Installed gsap via npm

Installed next-transpile-modules

 

Created a animation.js file that has this code:

import { gsap } from "gsap";

 

gsap.from (".studio" > "h2.section-title", {y:500, opacity:0, duration:1});

 

In the file I'm trying to animate elements, I imported the above animation.js file:

import '../scripts/animations.js';

 

The page loads without error but in terminal I get this:

GSAP target false not found. https://greensock.com
Invalid y tween of 500 Missing plugin? gsap.registerPlugin()
Invalid opacity tween of 0 Missing plugin? gsap.registerPlugin()

 

KJ

 

[OSUblake 18,475 Likes (Superhero)]

Hi @KevinJ 

 

I think your selector is wrong. Perhaps you meant this.

gsap.from (".studio > h2.section-title", {y:500, opacity:0, duration:1});

 

[OSUblake 18,475 Likes (Superhero)]

The target is false because you're doing a comparison here. You're saying is .studio greater than h2.section-title.

".studio" > "h2.section-title"

 

[KevinJ 4 Likes (Newbie)]

3 minutes ago, OSUblake said:

Hi @KevinJ 

 

I think your selector is wrong. Perhaps you meant this.

gsap.from (".studio > h2.section-title", {y:500, opacity:0, duration:1});

 

@OSUblake that's what I had initially but I got this error (I changed it back to that and the error is back):

 

 

[KevinJ 4 Likes (Newbie)]

BTW, I did add:

 

  "build": {
    "transpile": [
      "gsap"
    ]
  }

 

to my pakage.json file as you suggested.

[OSUblake 18,475 Likes (Superhero)]

Can you make a simple repo that shows the problem so we can take a look?

 

8 minutes ago, KevinJ said:

to my pakage.json file as you suggested.

 

For next.js, and you would add to it your next.config.js file. I haven't tried, but based on the plugin readme, it might be like this.

 

// next.config.js
const withTM = require('next-transpile-modules');

module.exports = withTM({
  transpileModules: ['gsap']
});

 

[KevinJ 4 Likes (Newbie)]

@OSUblake I spent the morning tinkering and broke all kinds of stuff.

 

const withSass = require("@zeit/next-sass");

const withCSS = require("@zeit/next-css");

const withTM = require('next-transpile-modules');

 

module.exports = withTM({

transpileModules: ['gsap']

});

 

module.exports = withCSS(

withSass({

webpack(config, options) {

config.module.rules.push({

test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,

use: {

loader: "url-loader",

options: {

limit: 100000

}

}

});

 

return config;

}

})

);

 

Everything is back to what it was.

Added this and removed the addition to the package.json file but still getting the previous error.

 

I'll look at getting a repo setup.

 

KJ

 

[OSUblake 18,475 Likes (Superhero)]

2 hours ago, KevinJ said:

I'll look at getting a repo setup.

 

Try to do that. It's really hard to troubleshoot problems with frameworks without actually seeing how everything is set up.

 

All I can tell right now is that the error cannot read property querySelectorAll of undefined means the script isn't running inside a browser. So that error is probably happening when next.js is doing server side rendering.

[KevinJ 4 Likes (Newbie)]

Would spinning up a codesandbox also work?

[ZachSaucier 7,130 Likes (Superhero)]

38 minutes ago, KevinJ said:

Would spinning up a codesandbox also work?

If you can recreate the errors.

[KevinJ 4 Likes (Newbie)]

Hi @OSUblake and @ZachSaucier

 

Hope you had a good break.

Here is the link to the repo.

https://github.com/KevJames/collectiveand.co

 

I did manage to gsap to work but we don't think it is the right way.

 

KJ

 

I'll probably recreate the animation in the hero section, using gsap.

[ZachSaucier 7,130 Likes (Superhero)]

18 minutes ago, KevinJ said:

Here is the link to the repo.

https://github.com/KevJames/collectiveand.co

Hey Kevin. That link goes to a 404 page for me. Maybe the repo is private?

[KevinJ 4 Likes (Newbie)]

Doh!

I'll look at as soon as I get back to the my laptop.

KJ

[KevinJ 4 Likes (Newbie)]

Can you tell me if works? I recreated the page on codesandbox

https://pquuy.sse.codesandbox.io/collective

[ZachSaucier 7,130 Likes (Superhero)]

43 minutes ago, KevinJ said:

Can you tell me if works? I recreated the page on codesandbox

I can view it if that's what you mean  

 

Now what's your question? Just seeking advice on how to better do it?

[KevinJ 4 Likes (Newbie)]

Yes

[ZachSaucier 7,130 Likes (Superhero)]

What the editor link for that codesandbox page? I can't figure out how to get there from the full page link that you shared.

[KevinJ 4 Likes (Newbie)]

https://codesandbox.io/s/next-gsap-pquuy

[ZachSaucier 7,130 Likes (Superhero)]

Thanks.

 

I recommend using GSAP's SplitText to make splitting up the characters and words much easier. It comes with Shockingly Green or greater Club GreenSock membership  

But what you have works if you're not using it.

 

GSAP 3 also has a .toArray() utility method that you could use instead of using Array.from(). 

 

It's generally more convenient/better to use GSAP's .set() method instead of using .style.property =. For example,

// this
words[currentWordIndex].style.opacity = "1";
// would be 
gsap.set(words[currentWordIndex], {opacity: 1});

setTimeout is not the best to use. It's better to use GSAP's .delayedCall method.

 

I wouldn't use a setInterval interval for similar reasons - I'd recommend using GSAP's timelines (as a bonus doing so gives you even more control over your animations should you need to change it!). That would also allow you to use GSAP's repeat property and simplify your logic of changing the text.

 

It's generally a good idea to avoid CSS transitions when working with GSAP as it's easy for them to conflict. I'd recommend using GSAP's tweens instead of transitions. It's an old article but this one details more about why:

How you do so depends on the exact animation, but for this sort of thing it'd generally be good to use a .from() to move the letter in and a .to() to move it out (both using GSAP's staggers). 

 

That should give you plenty to change should you choose to