Jump to content
Search Community

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

jesper.landberg test
Moderator Tag

Recommended Posts

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

 

 

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

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