Jump to content
GreenSock

KevinJ

Next.js and GSAP 3

Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Hi @KevinJ 

 

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

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

 

  • Like 1
Link to comment
Share on other sites

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"

 

  • Like 1
Link to comment
Share on other sites

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):

 

image.thumb.png.da4b442e7cf0764227a7f23e9a3b900a.png

 

Link to comment
Share on other sites

BTW, I did add:

 

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

 

to my pakage.json file as you suggested.

Link to comment
Share on other sites

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']
});

 

  • Like 3
Link to comment
Share on other sites

@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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Would spinning up a codesandbox also work?

Link to comment
Share on other sites

38 minutes ago, KevinJ said:

Would spinning up a codesandbox also work?

If you can recreate the errors.

Link to comment
Share on other sites

Doh!

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

KJ

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :) 

  • Like 1
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.
×