NextJS + ScrollSmoother

[Olav]

Hi!
 

I'm trying to add the ScrollSmoother plugin to my project, and have literally copied the example provided by greenbacks learning.

My export for the root layout looks like this:

 

'use client'

import './globals.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
import localFont from 'next/font/local'
import useIsomorphicLayoutEffect from '../helpers/isomorphicEffect'

import { useRef } from 'react'
import { usePathname } from 'next/navigation'
import { gsap } from 'gsap/dist/gsap'
import { ScrollSmoother } from 'gsap/ScrollSmoother'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger, ScrollSmoother)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const smoother = useRef()
  const ctx = useRef()
  const pathname = usePathname()

  useIsomorphicLayoutEffect(() => {
    ctx.current = gsap.context(() => {
      smoother.current = ScrollSmoother.create({
        smooth: 1,
        effects: true,
      })
    })

    return () => ctx.current.revert()
  }, [pathname])

Which works fine in my localhost area, but on build I get the following error. Where does this go wrong? What can I change?

Also, in my IDE it looks like this.

 

Another thing that I don't understand, my code won't run unless my ../types/gsap.d.ts looks like this:
 

declare module 'gsap/dist/gsap'
declare module 'gsap/ScrollSmoother'
declare module 'gsap/ScrollTrigger'

Which shouldn't be necessary if I'm following the docs correctly, anyone have an idea why this is necessary?

 

Any help will be highly appreciated, looking forward to your reply,

Olav

[Rodrigo]

Hi,

 

This is most likely due to the fact that you're not setting the type definition for the GSAP Context instance in your ref.

 

Try this:

const smoother = useRef<any>(null);
const ctx = useRef<any>(null);

Hopefully this helps. If you keep having issues please create a minimal demo or link to a repo so we can take a look (please indicate the file and line so we can go there directly if you use a repo).

Happy Tweening!

[Olav]

Hi Rodrigo, 

Thanks! This worked for the build process. Why does it work in the start example but not in my project though?

 

And also, do you maybe have an idea on the types thing mentioned in my initial post?

[Rodrigo]

Hi,

 

I'm totally making assumptions here, but my guess is that type checking, linting and building on Stackblitz might work differently than a regular development setup on a computer. Keep in mind that services like Stackblitz have to make a lot of work in order to make Node and SSR work in a browser environment, so (again I'm just guessing here) they might ease-off some strict stuff in order to simplify the entire app working as expected.

 

As for this:

declare module 'gsap/dist/gsap'
declare module 'gsap/ScrollSmoother'
declare module 'gsap/ScrollTrigger'

I have no idea, I'm not very familiar with typescript. I never use it in personal projects and only work with it when I have no other option. I created a Next TS project on my local machine and it builds as expected with those type checks I mentioned in my previous post, so I assume that those changes should be enough to avoid errors while building the app. Now if you have a more strict TS setup on your eslint configuration or some other config file, that's beyond the help I can provide, sorry.

 

Happy Tweening!

[EfrainBergin]

  

On 4/26/2023 at 1:58 AM, Olav said:

Hi!
 

I'm trying to add the ScrollSmoother plugin to my project, and have literally copied the example provided by greenbacks learning.

My export for the root layout looks like this:

 

'use client'

import './globals.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
import localFont from 'next/font/local'
import useIsomorphicLayoutEffect from '../helpers/isomorphicEffect'

import { useRef } from 'react'
import { usePathname } from 'next/navigation'
import { gsap } from 'gsap/dist/gsap'
import { ScrollSmoother } from 'gsap/ScrollSmoother'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger, ScrollSmoother)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const smoother = useRef()
  const ctx = useRef()
  const pathname = usePathname()

  useIsomorphicLayoutEffect(() => {
    ctx.current = gsap.context(() => {
      smoother.current = ScrollSmoother.create({
        smooth: 1,
        effects: true,
      })
    })

    return () => ctx.current.revert()
  }, [pathname])

Which works fine in my localhost area, but on build I get the following error. Where does this go wrong? What can I change?

Also, in my IDE it looks like this.

 

Another thing that I don't understand, my code won't run unless my ../types/gsap.d.ts looks like this:
 

declare module 'gsap/dist/gsap'
declare module 'gsap/ScrollSmoother'
declare module 'gsap/ScrollTrigger'

Which shouldn't be necessary if I'm following the docs correctly, anyone have an idea why this is necessary?

 

Any help will be highly appreciated, looking forward to your reply,

Olav

Do you still need help? I will try to help you. But yes, if you want to read essay samples then you can visit https://writinguniverse.com/free-essay-examples/to-kill-a-mockingbird/ here where you will find a lot of them. And the good thing is you can don't have to pay anything to read those essay samples.

 

Do you still need help?

[Olav]

@EfrainBergin I've got something working but I'd be more than glad to hear your solution aswell!

[EfrainBergin]

I am trying.