Jump to content
Search Community

GSAP - ScrollTrigger - observer horizontal scroll go to panel

vaviriot test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or logic troubleshooting. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You'll definitely have a MUCH better chance of getting a good answer if you greatly simplify your demo. There's around 1200 lines of JS/CSS/HTML in there 😯 It certainly looks to me like it's logic-related somewhere in your code, not GSAP-related. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a simplified minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

Heya, thanks for the demo!

 

There's a lot here though - Would you mind cleaning it up a bit and making it clear which numbers the panels are - no need for styling and content like you have currently. 


As you're having problems with the panel logic please just include the panels along with some simple labelling. Just colored rectangles with a big ONE TWO THREE on them, and some links with a bit ONE TWO THREE etc would be great.

We don't need to see your content or any animations that aren't related. Help us to help you -

 

Thanks!

 

Link to comment
Share on other sites

  • Solution

Hi,

 

The problem is in the logic you're using for moving the panels when you click on the element and which panels you're selecting. Right now you're just selecting one, you have to create subsets of the panels array and animate all of them. I don't have time to go through all the logic you have in your method so I came up with this instead:

navList.forEach((anchor, i) => {
  anchor.addEventListener("click", function (e) {
    e.preventDefault();
    preventScroll.disable();
    intentObserver.disable();
    if (preventScroll.isEnabled === false && !animating) {
      if (i > currentIndex) {
        gsap.to(swipePanels.slice(0, i + 1), { xPercent: 0 });
      } else if (swipePanels[i + 1]) {
        gsap.to(swipePanels.slice(i + 1), { xPercent: 100 });
      }
      currentIndex = i;
      // tween.scroll(tween.start);
      // if (i >= currentIndex) {
      //   gotoPanel(i, true, true);
      // } else {
      //   gotoPanel(i, false, true);
      // }
    }
  });
});

You can learn more about the slice method here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

 

Here is a fork of your codepen that does just that:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Hi,

 

You can try with anticipatePin which is a number not a boolean. From the ScrollTrigger docs:

Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0).

 

crollTrigger.create({
  trigger: ".swipe-section",
  pin: true,
  anticipatePin: 1,
  start: "top top",
  end: "+=50%",
});

But this kind of behaviour kind of comes with the territory. There is always a possibility that a user scrolls a bit too hard and is going to take a few ms for the code to catch up with the scroll position, it's just the nature of the whole pinning stuff.

 

Hopefully this helps.

Happy Tweening!

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