Jump to content
Search Community

cant set the max width of the container while using gsap horizontal scroll w react

coldgroove test
Moderator Tag

Recommended Posts

Hi @coldgroove and welcome to the GreenSock forums!

 

I'm not sure I follow what you mean. The pin spacer element added by ScrollTrigger is based on the calculations made taking into account the start and end points of the animation.

 

In this case I assume that the issue comes from this white space after the last element, right?
RBdnIhc.png

 

If that's the case ScrollTrigger is doing exactly what is supposed to do. The problem here stems from the fact that you copy/pasted some code that takes into account slides that have a width of a 100% of the screen. The animation is doing this:

gsap.to(panels.current, {
  xPercent: -100 * (totalPanels - 1),
  ease: "none",
  scrollTrigger: {
    trigger: panelsContainer.current,
    pin: true,
    scrub: 1,
    snap: 1 / (totalPanels - 1),
    end: () => "+=" + panelsContainer.current.offsetWidth
  }
});

The key here is the xPercent value. That means that each panel is being moved it's own width times the number of panels, that works as expected when the panels have the width of the screen. In your case the panels have a width of 25% so you have 4 panels at all times in the screen. So you need to move each panel it's own width times the amount of panels that are not visible on the screen:

useEffect(() => {
  const totalPanels = panels.current.length;
  console.log(totalPanels);
  gsap.to(panels.current, {
    // takes into factor the width (in percentage) of the panels
    xPercent: -100 * (totalPanels - (1 / 0.25)),
    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,
    },
  });
}, []);

Finally I'd recommend you to use the latest version of GSAP (your example was using 3.6) and to use GSAP Context when working with React/Vue/Svelte and those type of frameworks:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Let us know if you have more questions.

Happy Tweening!

Link to comment
Share on other sites

@Rodrigo Big thanks, I'm new to GSAP and learning alot since I've started working with it, I've copied and pasted this sandbox that I've found on the internet because I'was too lazy to implement one-to-one copy of my production code, I'm using the latest version with context and everything.

 

I've tried to tweak the params with hardcoded values but somehow couldnt get it working. Now it all makes sense, thanks again this solved my issue!

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