Jump to content
GreenSock

Sorumeiji

Need help implementing scrolltrigger plugin with Snapping - Next JS / React

Recommended Posts

Hello guys,


I am in need of some dire help. I am trying to implement a scrolltrigger effect with snapping exactly like the GSAP codepen demo here, but in React / Next JS. I been working on it for days trying to implement on a website. I also created a mini codesandbox demo with the effect, but as you see, the behavior snapping and scroll is not the same. I was wondering if I could get some assistance.

Sandbox link: https://codesandbox.io/s/festive-babycat-b8lh74?file=/pages/_app.js

 

  useEffect(() => {
    let panels = gsap.utils.toArray(".panel");
    let scrollTween;
    function scrollTo(arg) {
      return { y: arg * innerHeight, autoKill: false };
    }

    function goToSection(i) {
      scrollTween = gsap.to(window, {
        scrollTo: () => {
          scrollTo(i);
          console.log(i);
        },
        duration: 1,
        onComplete: () => (scrollTween = null),
        overwrite: true
      });
    }

    panels.forEach((panel, i) => {
      ScrollTrigger.create({
        trigger: panel,
        start: "top bottom",
        markers: true,

        onToggle: (self) => self.isActive && !scrollTween && goToSection(i)
      });

      ScrollTrigger.create({
        start: 0,
        end: "max",
        snap: 1 / (panels.length - 1)
      });
    });
  }, []);


 

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Your codesandbox has some js error fix that. Maybe your problem will resolve. 

Link to comment
Share on other sites

Oh that error doesn't exist on my local, it  happens because of strict mode on CodeSandBox. Because innerHeight is a property of window it warns me about that, it really doesn't throw a hard error. Unless, there is another way I can get innerHeight in react. I was thinking of using the window property directly. Let me try to fix that though.

Link to comment
Share on other sites

I changed innerHeight to window.innerHeight and I am still getting the same results. I fixed the errors in the console as well.

Link to comment
Share on other sites

Hi Sorumeiji,

 

It looks like you need to fix your styling or HTML structure. That layering effect is not using ScrollTrigger. The only thing ScrollTrigger is used for is the snapping. See how it works when I remove ScrollTrigger.

 

See the Pen LYOJZdj by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

Oh, I had no clue. Give me some time to fix the HTML and see what I can do. Is there also a way to delay after the snapping happens?

Link to comment
Share on other sites

Not sure what you mean by delay, but ScrollTrigger does not control the scrolling. I'm wondering if you are trying to do something like this?

 

See the Pen gOXXqKp by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

@OSUblake Yeah, I am trying to do something exactly like that, as in the example there.

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.
×