Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
KevinJ

Next.js and GSAP 3

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

Share this post


Link to post
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 1

Share this post


Link to post
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

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites

BTW, I did add:

 

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

 

to my pakage.json file as you suggested.

Share this post


Link to post
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 2

Share this post


Link to post
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

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Would spinning up a codesandbox also work?

Share this post


Link to post
Share on other sites
38 minutes ago, KevinJ said:

Would spinning up a codesandbox also work?

If you can recreate the errors.

Share this post


Link to post
Share on other sites

Doh!

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

KJ

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×