Cannot get GSAP ScrollSmoother to work in Next.js project

[Duo]

Hi,

 

I'm having trouble getting GSAP ScrollSmoother to init properly on a simple single page barebones Next.js application.

 

I have successfully imported the GSAP core and the ScrollSmoother into the index.tsx file as I've managed to log both in the console.

 

This is what I have in my index.tsx file:

 

import React, { useLayoutEffect, useRef } from 'react';
import { gsap } from "gsap"
import { ScrollSmoother } from "gsap/dist/ScrollSmoother"
import styles from '@/styles/home.module.scss'

if (typeof window !== 'undefined') {
  gsap.registerPlugin(ScrollSmoother);
}

export default function Home() {

  const main = useRef();
  const smoother = useRef();

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      smoother.current = ScrollSmoother.create({
        smooth: 1,
        effects: true
      });
    }, main);
    return () => ctx.revert();
  }, []);

  return (
    <>      
      <main id="scroll-wrapper" ref={main}>
        <div className='scroll-content'>
        </div>
      </main>
    </>
  )
}

I've attached a screenshot of the error message that is populating in the browser.

 

I have spent significant time and multiple different methods of trying to get this to work properly and am having no luck so I'd thought I'd reach out to the experts in this forum.

 

Any help would be greatly appreciated.

 

Thanks,

Dayne

 

[akapowl]

Hello @Duo

I just took a quick look into the ScrollSmoother docs, and here's what the say:
 

Quote

• Does ScrollSmoother require ScrollTrigger or can I use it independently?

  ScrollSmoother is built on TOP of ScrollTrigger's functionality, so yes it is a dependency. You must load GSAP/ScrollTrigger version 3.10.0 or later.

 

It doesn't look like you are importing and registering ScrollTrigger in your project. Try doing that and see if it already resolves your issue.

If it doesn't, a minimal demo would be really appreciated.

 

I hope that does already help, though.

 

[Duo]

Hi @akapowl

 

You are a magician! A simple fix that only could be spotted by someone who hasn't looked at the code over and over haha.

 

Thanks so much for your quick response and solution. It's greatly appreciated.

 

Dayne