Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jesper.landberg

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

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

  • 8 months later...

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 

Link to comment
Share on other sites

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.

 

 

 

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