Jump to content
Search Community

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

Sorumeiji test
Moderator Tag

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

  • Like 1
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

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.
×
×
  • Create New...