Jump to content
GreenSock

JoeH

ScrollSmoother parallax effects not initiating in React when navigating between routes

Recommended Posts

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

I'll setup a code sandbox!

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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?

 

  • Thanks 1
Link to comment
Share on other sites

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.

 

 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Do ScrollTrigger.refresh().

 

 

  • Like 1
Link to comment
Share on other sites

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

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!

  • Like 1
Link to comment
Share on other sites

Are the fixed elements going to change for every page? 

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×