search

greensock / react

Tools for using GSAP in React, like useGSAP() which is a drop-in replacement for useLayoutEffect()/useEffect()
251 stars 7 forks source link

ScrollSmoother Usage #8

Open davidkhierl opened 5 months ago

davidkhierl commented 5 months ago

Maybe we can add documentation on how to use with ScrollSmoother ?

here is my current implementation but it seems the smooth doesn't works

export const ScrollSmootherWrapper = forwardRef<
  HTMLDivElement,
  ScrollSmootherWrapperProps & HTMLAttributes<HTMLDivElement>
>(({ children, options, noInitialWrapper, ...props }, ref) => {
  useGSAP(() => {
    gsap.registerPlugin(ScrollTrigger, ScrollSmoother)

    const smoother = ScrollSmoother.create({
      wrapper: '#smooth-wrapper',
      content: '#smooth-content',
      smooth: 3,
      effects: true,
      ...options,
    })
  })

  if (noInitialWrapper) return <>{children}</>

  return (
    <div ref={ref} id="smooth-wrapper" {...props}>
      <div id="smooth-content">{children}</div>
    </div>
  )
})

and I have this in one of my component

  useGSAP(
    () => {
      gsap.to(ref.current, {
        scrollTrigger: {
          trigger: ref.current,
          start: 'top top',
          end: 'bottom top',
          markers: true,
          scrub: true,
        },
        clipPath: 'inset(30% 10%)',
      })
    },
    { scope: ref }
  )
jackdoyle commented 5 months ago

Hi @davidkhierl

Can you please provide a minimal demo (like a Stackblitz) that clearly illustrates the issue? Here's a starter file you can fork: https://stackblitz.com/edit/react-iqmjfx?file=src%2FApp.js

It seems like you've got logic in there that would cause it to render without any smooth-wrapper or smooth-content if noInitialWrapper is truthy. Might that be your problem?

I also noticed that you didn't register the useGSAP hook as a plugin before using it, like: 

gsap.registerPlugin(useGSAP);

Once we see a minimal demo, I'm sure things will become much more clear. You might want to consider posting your question/demo in the forums at https://gsap.com/community

davidkhierl commented 5 months ago

Hi @jackdoyle

I'm using nextjs, I believe its because of the SSR, I moved the gsap.registerPlugin outside the component, seems to be working now.

gsap.registerPlugin(ScrollTrigger, ScrollSmoother)

export const ScrollSmootherWrapper = forwardRef<
  HTMLDivElement,
  HTMLAttributes<HTMLDivElement>
>(({ children, ...props }, ref) => {
  useGSAP(() => {
    ScrollSmoother.create({
      wrapper: '#smooth-wrapper',
      content: '#smooth-content',
      smooth: 2,
      effects: true,
    })
  })

  return (
    <div ref={ref} id="smooth-wrapper" {...props}>
      <div id="smooth-content">{children}</div>
    </div>
  )
})

and added suppressHydrationWarning inside Root Layout body

<body suppressHydrationWarning></body>

I hope this is some of the right way to use in NextJS>

For the registering of useGsap, I don't find it on the documentation is it required also to register it?

rhernandog commented 5 months ago

Hi @davidkhierl!

We have this demo that shows how to use ScrollSmoother in a NextJS app, using the app router: https://stackblitz.com/edit/stackblitz-starters-cxedmc?file=app%2Flayout.tsx,app%2Fpage.tsx

For the registering of useGsap, I don't find it on the documentation is it required also to register it?

Is not really necessary to register the hook but it could be needed if you're testing things with the GSAP Trial package, since the GSAP object being imported in the useGSAP would be a different one than the one imported from the GSAP Trial package: https://github.com/greensock/react/blob/main/src/index.js#L12

import gsap from "gsap-trial";
import { useGSAP } from "@gsap/react";

The gsap imported from gsap trial is a completely different object than the one the useGSAP hook uses internally.

As I mentioned is not really needed but it doesn't hurt in any way to register it.

and added suppressHydrationWarning inside Root Layout body

Right now we're looking into a way to avoid the SSR warnings while registering and using GSAP and our Plugins. I hope to have a working demo between today and tomorrow.

davidkhierl commented 5 months ago

@rhernandog Hi, we currently using gsap business license.

Before I fixed the hydration error by moving the gsap.registerPlugin inside useIsomorphicLayoutEffect hook. this is me who commented this fix from the forum. https://gsap.com/community/forums/topic/35440-warning-extra-attributes-from-the-server-style/?do=findComment&comment=178137&_rid=112950

Following the above, by putting the gsap.registerPlugin inside useGsap didn't do the trick. So for now I think adding suppressHydrationWarning can be the temporary fix.

before useGsap became available, I created this npm package with ScrollSmoother wrapper, but since then it made more sense to use useGsap, the reason I'm refactoring my projects now.

I will also try to create a simple demo with ScrollSmoother with useGsap

davidkhierl commented 5 months ago

I saw similar issue from the forum https://gsap.com/community/forums/topic/35440-warning-extra-attributes-from-the-server-style/?do=findComment&comment=203599&_rid=112950

https://gsap.com/community/forums/topic/39836-numerical-scrub-has-no-effect/