GSAP ScrollTo wrong position

[pshechko]

I've created a scrolling container inside of the section. And it works just fine until I got to the next-prev buttons. The issue here is that scrollTo miscalculates the scroll position and sections become stuck in between. I've tried everything passing ids, scroll values, elements, even add fixed value on scroll (e.g. 200px). But no help.

 

Help me please I've killed so much time trying to fix this bug.

 

Here is my codepen. You can scroll down to section #3, and then play with buttons.

See the Pen gOJvyNq by pshechko (@pshechko) on CodePen.

[Rodrigo]

Hi @pshechko and welcome to the GSAP Forums!

 

Nice work with the animation, looks really good ?

 

What you can do is store the ScrollTrigger instance you're using for the slider animation and use the start and end points of it and some simple math with the amount of slides and the current index, something like this:

const t = gsap.to(sections, originalConfig);

function goToSection(index) {
  const start = t.scrollTrigger.start;
  const end = t.scrollTrigger.end;
  gsap.to(window, {
    scrollTo: {
      y: start + ((end - start) * (index / (sections.length - 1))),
      autoKill: true,
    },
    ease: "power1.inOut",
  });
};

Here  is a fork of your demo:

See the Pen bGyLyoV by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[pshechko]

Oh snap, I actualy did it! I just made a single mistake - I didvided by sections.length (not sections.length - 1). 

Thank you very much, this works great.

I really love this library, I used to do it all from scratch back in the days, and it was a tonn of the spaghetti code (which still did not work as intended ?)