[ScrollSmoother parallax effects not initiating in React when navigating between routes]

Yes ideally, at the moment I'm doing it by resetting the "content" div (https://greensock.com/docs/v3/Plugins/ScrollSmoother/content()) to something internal on the specific page allowing me to segment pages and have space for fixed elements but it feels a little cumbersome maybe

[ScrollSmoother parallax effects not initiating in React when navigating between routes]

Just been trying this out and it works great (including all previously broken functions), the only issue is if i move the two <div> wrappers from _app.js into actual individual pages (I need to do this to move fixed elements outside the container), the smooth scrolling breaks when i navigate between pages in Next, any suggestions on how to handle this?

 

Thanks again!

[ScrollSmoother parallax effects not initiating in React when navigating between routes]

Amazing, works perfectly thank you @OSUblake - one last question, this doesn't seem to work for me, what am i doing wrong?

 

import useScrollSmoother from '@/components/smooth-scroller'

export default function Example() {
  const { smoother } = useScrollSmoother();

  function scrollToTop() {
    smoother.scrollTo(0);
  }
  
  return (
    <button onClick={scrollToTop}>Scroll to Top!</button>
  )
}

[ScrollSmoother parallax effects not initiating in React when navigating between routes]

Hey both @OSUblake @JoeH, I really love the hook approach and am trying to run it in a project of my own (also coming from locomotive!), it's all working fine I'm just looking for a method to "refresh" the smoothscroll instance, for example, when I filter some projects, the page height might change, is there a function I can use to do this? I've tried the following with no luck:

 

import useScrollSmoother from '@/components/smooth-scroller'

export default function Example() {
  const { smoother } = useScrollSmoother();

  function scrollUpdate() {
    smoother.refresh();
  }
  
  return (
    <button onClick={scrollUpdate}>Update Height!</button>
  )
}

Any help appreciated, cheers!

[Scrollsmoother, method to refresh?]

Hey @Blake! How would I use this in a React context?

 

Small example of what I'm trying to achieve below:

let smoother = null;

useEffect(() => {
  smoother = ScrollSmoother.create({
    smooth: 1,
    normalizeScroll: true,
    effects: true
  })
}, [smoother]);

function filterScrollUpdate() {
  smoother.refresh()
}

 

Doing this I get `TypeError: smoother.refresh is not a function`

 

Thank you!