GSAP and Next.js, up to date "best practices"?

[jesper.landberg 58 Likes (Contributor)]

Hi, just reaching out to see if anyone is using GSAP together with Next.js and are able to share/point me towards some good and up to date code examples?

[OSUblake 18,337 Likes (Superhero)]

Hi Jesper!

 

Looking for anything in particular? And do you have any code you can share? We might be able to critique it. 😉

 

The new selector is really nice as you don't have to create a ref for every element.

https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

 

Here's a good post on how to make reusable animations.

 

 

Registering all your plugins and configuring GSAP in a centralized location.

 

useLayoutEffect can prevent FOUC, like with Flip and from/fromTo animations, but complains when being used with SSR. Here's a nice little hook to get around that.

// use-isomorphic-layout-effect.js
import { useLayoutEffect, useEffect } from 'react';
const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export default useIsomorphicLayoutEffect;

// app.js
import useLayoutEffect from './use-isomorphic-layout-effect';
function App() {
  useLayoutEffect(() => {
    console.log('hello there');
  }, []);
  return 'Hello world';
};

 

 

 

[jesper.landberg 58 Likes (Contributor)]

54 minutes ago, OSUblake said:

Hi Jesper!

 

Looking for anything in particular? And do you have any code you can share? We might be able to critique it. 😉

 

The new selector is really nice as you don't have to create a ref for every element.

https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

 

Here's a good post on how to make reusable animations.

 

 

Registering all your plugins and configuring GSAP in a centralized location.

 

useLayoutEffect can prevent FOUC, like with Flip and from/fromTo animations, but complains when being used with SSR. Here's a nice little hook to get around that.

// use-isomorphic-layout-effect.js
import { useLayoutEffect, useEffect } from 'react';
const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export default useIsomorphicLayoutEffect;

// app.js
import useLayoutEffect from './use-isomorphic-layout-effect';
function App() {
  useLayoutEffect(() => {
    console.log('hello there');
  }, []);
  return 'Hello world';
};

 

 

 

This is a great start, thanks Blake! No code to share just yet, just starting out testing Next, and wanted to make sure I start out properly:P

[OSUblake 18,337 Likes (Superhero)]

Another thing with next. It doesn't seem to work with ES modules, so you may to have import the UMD files.

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

 

https://github.com/vercel/next.js/issues/706

 

[Ndonna 2 Likes (Newbie)]

Hi @OSUblake please I'm currently playing around with a NEXT JS codebase but even with the Isomorphic layout, the .from keeps tweaking. It plays the returns to the original position 

[OSUblake 18,337 Likes (Superhero)]

What version of React? If you're using version 18, that is going to require some extra work if you're using strict mode. We're looking at ways to smooth that over, but it's 100% a React issue.