Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ScrollSmoother Usage #8

Open
davidkhierl opened this issue Jun 9, 2024 · 5 comments
Open

ScrollSmoother Usage #8

davidkhierl opened this issue Jun 9, 2024 · 5 comments

Comments

@davidkhierl
Copy link

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
Copy link
Member

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
Copy link
Author

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
Copy link

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
Copy link
Author

@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
Copy link
Author

davidkhierl commented Jun 10, 2024 •
edited
Loading

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/

Nanae-j added a commit to Nanae-j/fizzy-animation-site that referenced this issue Dec 21, 2024
@Nanae-j
[fix]hydration Errorの修正
2f46648 
エラー文：
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

参考：
greensock/react#8

https://gsap.com/community/forums/topic/35440-warning-extra-attributes-from-the-server-style/#comment-203599
→
run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jackdoyle @rhernandog @davidkhierl