Setting up ScrollSmoother in framer as override

[Adam Kozel]

I know you guys might tell me this is more of framer community question but i am trying to setup scrollsmoother in my framer project. I have created wrappers as needed and now i am trying to create override that sets up scrollsmoother. I am not fluid programmer more like bashing my wall against a wall until i make it work. If you could help me it'd be great.

Thank you!
 

import Scrollsmoother, {
ScrollSmoother,
} from "...redacted"
import gsap from "gsap"
import { useEffect, useLayoutEffect } from "react"
gsap.registerPlugin(ScrollSmoother)

export default function SmoothScroll() {
let smoother = ScrollSmoother.create({
wrapper: ".parent",
content: ".child",
smooth: 2,
effects: true,
smoothTouch: 0.1,
})

return smoother
}

[Rodrigo]

Hi @Adam Kozel and welcome to the GSAP Forums!

 

Thanks for being a Club member and supporting GSAP! 💚

 

It's very difficult to troubleshoot without a minimal demo; the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

 

Finally I'm curious about the fact that you want to use GSAP with Framer Motion? Any particular reason for that? Not to brag but GSAP can do mostly everything Framer does and then some more, like timelines, staggers, SVG, MotionPath, Draggable, Inertia, ScrollSmoother, etc.

 

Happy Tweening!

[Adam Kozel]

Sorry for the confusion, i am trying to create override for tool framer.com, not framer motion. It should act as an override that attaches itself to DOM element

[Rodrigo]

Hi,

 

11 hours ago, Adam Kozel said:

It should act as an override that attaches itself to DOM element

Honestly I don't really understand this. ScrollSmoother has the advantage that it uses the native scroll (no scroll hijacking) to create the smooth scrolling experience. ScrollSmoother needs just a basic HTML setup by default to work:

<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
    </div>
  </div>
  <!-- position: fixed elements can go outside --->
</body>

If not you can pass a specific content and wrapper elements in order to create the smooth scrolling effect as mentioned in the docs:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/#config-object

 

Maybe framer creates a specific DOM structure by default or maybe you could create a specific one in order to accommodate the setup ScrollSmoother requires.

 

Here is a simple demo using ScrollSmoother in React:

https://stackblitz.com/edit/react-iqmjfx

 

This uses React Router:

https://stackblitz.com/edit/stackblitz-starters-9xvpi2

 

Honestly without a minimal demo there is not a lot we can do to find a particular issue. Unfortunately until this thread I never heard of Framer (the fact that I confused it with Framer Motion tells that 😅) so I can't really tell you about it.

 

Hopefully this helps.

Happy Tweening!