Jump to content
Search Community

nextjs(react), gsap, scroll-trigger, scroll-smoother and fixed positioned layouts with demo

traile test
Moderator Tag

Recommended Posts

code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be)

 

In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long:

 

1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this?

 

2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page?

 

3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?

Edited by traile
I was messing with the file and forgot to fork
Link to comment
Share on other sites

Hi @traile,

 

I've been fiddling with both React and NextJS to find a scenario where ScrollSmoother breaks this setup and couldn't find any. Here is a live example where you can see it:

https://codesandbox.io/s/eager-danny-cr7isn?file=/pages/index.js

 

Here is the example without any frames:

https://cr7isn.sse.codesandbox.io/

 

I took the worst possible approach to including tailwind since I tried Next's Script component and installing the dependencies on the sandbox without any luck. You can see it in the _app.js file.

 

Also I set up a repo so you can see all the things that I tried:

https://github.com/rhernandog/nextjs-scrollsmoother

 

Finally if you need to include the bonus plugins in Codesandbox or even localhost you can install the GSAP Trial package:

npm install --save gsap-trial

Let us know if you keep having issues.

 

Happy Tweening!

Link to comment
Share on other sites

20 minutes ago, Rodrigo said:

Hi @traile,

 

I've been fiddling with both React and NextJS to find a scenario where ScrollSmoother breaks this setup and couldn't find any. Here is a live example where you can see it:

https://codesandbox.io/s/eager-danny-cr7isn?file=/pages/index.js

 

Here is the example without any frames:

https://cr7isn.sse.codesandbox.io/

 

I took the worst possible approach to including tailwind since I tried Next's Script component and installing the dependencies on the sandbox without any luck. You can see it in the _app.js file.

 

Also I set up a repo so you can see all the things that I tried:

https://github.com/rhernandog/nextjs-scrollsmoother

 

Finally if you need to include the bonus plugins in Codesandbox or even localhost you can install the GSAP Trial package:

npm install --save gsap-trial

Let us know if you keep having issues.

 

Happy Tweening!

Hi Rodrigo, I'm getting errors loading the links, not sure what's wrong; Oh, the stylesheet import in _app seems to be the problem, maybe.

Screenshot 2022-10-10 113023.png

Link to comment
Share on other sites

Hey,

 

Give it a run  in your local machine, perhaps get the code from the repo and try that as well and see how it works.

 

Codesandbox sometimes can require a bit of work to get everything going. Like I said in my previous post, I tried to install tailwind and it's dependencies but couldn't get it done. Also in Stackblitz I couldn't use the latest versions of React and Next, so that's why I finally added the script tag in the _app.js file, which is hideous to say the least :D

 

Happy Tweening!

Link to comment
Share on other sites

 

In my video here, you can see when I refresh (when the screen flashes white) the page stays where it is instead of reloading from the beginning. This is driving me nuts. I can't figure out what it is! In Rodrigo's code stack, it works great when refreshed, So I mimicked the code, and it still doesn't work. This is also happening on the website I'm working on locally. With or without scroll smoother doesn't matter, It just seems to be something with my scroll trigger setup. If you load my initial code stack and click the double box icon to open in new window, you can see this error happening. What could be causing this? Could this be a browser issue and nothing to do with gsap or scrolltrigger?

Link to comment
Share on other sites

5 minutes ago, GreenSock said:

Are you positive you're using the latest version of everything? GSAP/ScrollTrigger are on 3.11.3. And are you saying that you don't want the page to remember the scroll position? If so, you can set:

window.history.scrollRestoration = "manual"

 

Yes, the scroll restoration works! Thanks. I will do some research on this now to see how it works. Thanks a lot.

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

Hi Rodrigo,

In my Next js project when I'm trying to use Gsap ScrollSmoother and ScrollTrigger together I get this error. I'm using this version. If you can help me with that I'll be very grateful to you.

"gsap-trial": "3.11.3"

Screenshot_5.png

Link to comment
Share on other sites

Hi @Red1 and welcome to the GreenSock forums!

 

Is really hard for us to find issues without a minimal demo.

 

Based on the image you posted there are just two things that I can think of.

 

First import GSAP from the dist folder as well:

import gsap from "gsap-trial/dist/gsap";

Then register your plugins:

import gsap from "gsap-trial/dist/gsap";
import { ScrollTrigger } from "gsap-trial/dist/ScrollTrigger";
import { ScrollSmoother } from "gsap-trial/dist/ScrollSmoother";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
}

Finally in Next or any SSR environment is better to use an isomorphic layout effect:

import { useEffect, useLayoutEffect } from 'react';

export const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

Then in your components/pages:

import { useIsomorphicLayoutEffect } from '../helpers/isomorphicEffect';

useIsomorphicLayoutEffect(() => {
  const ctx = gsap.context(() => {
  }, ref);
  return () => ctx.revert();
}, []);

Hopefully this helps. If you keep having issues please fork this starter template in order to have a better look at what could be the issue.

Happy Tweening!

  • 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.
×
×
  • Create New...