Jump to content
GreenSock

samuelgoddard

Members
  • Posts

    5
  • Joined

  • Last visited

samuelgoddard's Achievements

  1. 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
  2. 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!
  3. 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> ) }
  4. 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!
  5. 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!
×