Jump to content
Search Community

Horizontal scrolltrigger to sections (React.js)

Gr0x test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi guys (again)! 😄

 

So.. My issue is that I can't make this (codepen) horizontally and fit into my react app... 

 

I have been looking at: https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react without any progress.

 

The goal: On scroll it triggers the page to go from one section to another horizontally (with a smooth feeling/animation) (like the codepen)

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

Link to comment
Share on other sites

  • 8 months later...

Oh, it is working. I am just not understanding how it is working. I been trying to study the code to make it vertical, but I am kinda struggling with the formula he is using to make it go horizontal. Mostly this section here:

 

    gsap.to(panels.current, {
      xPercent: -100 * (totalPanels - 1),
      ease: "none",
      scrollTrigger: {
        trigger: panelsContainer.current,
        pin: true,
        scrub: 1,
        snap: 1 / (totalPanels - 1),
        // base vertical scrolling on how wide the container is so it feels more natural.
        end: () => "+=" + panelsContainer.current.offsetWidth
      }
    });
  }, []);

 

Link to comment
Share on other sites

Yes, the pinning part! Thank you for the simpler example. I am new to animation and GSAP. So jut been trying to wrap my head around everything.  I  might just need to practice more simple things with GSAP. Then slowly approach the advance things as well.

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