JoeH Posted April 1, 2022 Share Posted April 1, 2022 Wow great plugin and perfect timing for a project I am working on, blows Locomotive scroll out the water! I have got it working great in React apart from when I navigate between routes (react-router-dom), the parallax effects don't seem to initiate. Works fine when I refresh the page. The ScrollSmoother effect works fine in this regard. Does some kind of refresh need to be run possibly? Thanks Link to comment Share on other sites More sharing options...
JoeH Posted April 1, 2022 Author Share Posted April 1, 2022 I'll setup a code sandbox! Link to comment Share on other sites More sharing options...
JoeH Posted April 1, 2022 Author Share Posted April 1, 2022 Ok I seem to have fixed this actually, I was previously creating the ScrollSmoother instance in App.js, but I think this was running too early I moved the initiation of ScrollSmoother to its own component: import React, {useRef, useEffect} from "react"; import {gsap} from "gsap"; import ScrollSmoother from "gsap/dist/ScrollSmoother"; export default function useScrollSmoother() { gsap.registerPlugin(ScrollSmoother); var smoother = useRef(null); useEffect(() => { smoother.current = ScrollSmoother.create({ smooth: 4, effects: true }) }, []) return {smoother} } And then in the page component use: const {smoother} = useScrollSmoother({}); You can then add effects for that page like: useEffect(() => { smoother.current.effects("img", { speed: "auto" }); }, []); Sorry for spamming up the forum! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 1, 2022 Share Posted April 1, 2022 Hi @JoeH That's an interesting approach using a hook, although I took a different approach using context. Now you have me debating what might be a better approach. The reason I went with context is to be able to get the smoother instance in any child component. You can do ScrollSmoother.get(), but because children are created before their parents, the ScrollSmoother might not be created yet. https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh?file=/pages/index.js What are your thoughts? 1 Link to comment Share on other sites More sharing options...
JoeH Posted April 1, 2022 Author Share Posted April 1, 2022 Thanks for this, I'm still rather new with React so haven't done more than some brief reading up on context, I'm going to take a deeper look at it then re-review your code. I can think of a messy way to communicate back from the child component to then run the get method but hardly ideal. 1 Link to comment Share on other sites More sharing options...
samuelgoddard Posted April 7, 2022 Share Posted April 7, 2022 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! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 7, 2022 Share Posted April 7, 2022 Do ScrollTrigger.refresh(). 1 Link to comment Share on other sites More sharing options...
samuelgoddard Posted April 7, 2022 Share Posted April 7, 2022 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> ) } Link to comment Share on other sites More sharing options...
OSUblake Posted April 7, 2022 Share Posted April 7, 2022 I'd have to see a demo, but I'm still leaning towards recommending the context approach as that useScrollSmoother hook is going to recreate a ScrollSmoother every time you use it in a component. https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh?file=/pages/index.js Link to comment Share on other sites More sharing options...
samuelgoddard Posted April 8, 2022 Share Posted April 8, 2022 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! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2022 Share Posted April 8, 2022 Are the fixed elements going to change for every page? Link to comment Share on other sites More sharing options...
samuelgoddard Posted April 8, 2022 Share Posted April 8, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2022 Share Posted April 8, 2022 Can you make a simple demo on CodeSandbox of what you're trying to do? It's very hard to answer UI/animation questions without a demo. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now