Jump to content
Search Community

GSAP ScrollTo wrong position

pshechko test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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 ?)

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