Pinned container screwing up the ScrollTo position

[RyanReese]

Believe me, I have scoured this forum for the answer, and have found numerous similar forum posts, but none of them have solved my issue. I have a set of <button>'s which work as a nav to scroll you to the pinned section in a vertically pinned GSAP container. The scrolling behavior is buggy. I believe it's due to the transform position screwing up GSAP. If I click a nav item one time, I will get the wrong position (the position depends on where I am, because I believe the transform value is a culprit here). If I keep clicking repeatedly, it gets closer and closer to the correct position, until it ultimately ends up in the right position. I've tried doing some math to provide an exact pixel number for GSAP to scrollto, but I have yet to succeed. I even tried implementing the getScrollLookup function in this thread

 

gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);

      let tlPosts = document.querySelector(".homepage-explore .tex-wrapper"),
          fullCont = document.querySelector(".homepage-explore"),
          imageSections = gsap.utils.toArray(".homepage-explore .image-slide"),
          sections = gsap.utils.toArray(".homepage-explore .explore-item-container"),
          getMaxHeight = () => sections.reduce((val, section) => val + section.offsetHeight, 0),
          maxHeight = getMaxHeight(),
          tl = gsap.timeline();

        let st = ScrollTrigger.create({
          animation: tl,
          trigger: ".homepage-explore",
          pin: true,
          start: 'top top',
          scrub: 1,
          end: () => `+=${document.querySelector('.tex-wrapper').offsetHeight - window.innerHeight}`,
          invalidateOnRefresh: false
        });

        tl.to(sections, {
          y: () => window.innerHeight - (maxHeight + 650),
          duration: 1,
          ease: "none"
        });
const sectionIndex = parseInt(this.getAttribute("data-section-index"));
        const scrollToSectionButtons = document.querySelectorAll(".homepage-explore .explore-button-nav");
        let links = gsap.utils.toArray(".homepage-explore .explore-button-nav"),
            linkTargets = links.map(link => $(".explore-item-container").eq(link.getAttribute("data-section-index"))[0]);
            
        //     const targetSection = sections[sectionIndex];

        links.forEach((link, i) => {
          let target = linkTargets[i];
          console.log(target);
          link.addEventListener("click", e => {
            ScrollTrigger.refresh(); 
            console.log(getScrollLookup(target, "top top"));
            let getScroll = getScrollLookup(target, "top 125px");
            e.preventDefault();
            gsap.to(window, {
              duration: 1,
              scrollTo: getScroll(target),
              overwrite: "auto"
            });
          })
        });

Basically what you see here is that "explore-button-nav" is the class of each <button> which should be what I'm clicking to scroll us to the specific pinned section. What am I doing wrong here? I can create a minified example if needed. ".tex-wrapper" is the direct parent of the 4 pinned sections that I'm trying to scroll to (there are 4 ".explore-button-nav"'s which correlate to the 4 pinned sections directly inside of ".tex-wrapper".

 

 

[RyanReese]

Here's a visual of what's happening with the current code I've implemented: https://fnlst.com/v/mHzbkA

 

Codepen - 

See the Pen eYxLrXr?editors=1010 by ryanreese09 (@ryanreese09) on CodePen

Edited November 29, 2023 by RyanReese
Added codepen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[RyanReese]

I believe we posted at the same time (I edited my above post for the codepen). Thank you! I'm working on reducing the code in there (I pasted my whole main.css file, for example).

[Rodrigo]

Hi,

 

Your demo is far too convoluted and has a lot of HTML and not mention CSS (more than 20,000 lines!). On top of that your JS is a bit hard to follow and has a bunch of commented out content in it.

 

The best I can achieve is this:

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

 

The reason is not working as expected could be the layout or CSS you have in place, but we don't have the time resources in these free forums to provide general consulting services or comb through hundreds of lines of code trying to find issues for our users. As you can see the demo I posted is using a magic number (that's far from doing actual magic) in order to accommodate for all the padding, margins, etc. on each section, but still is not accurate enough to achieve the sections landing where they should:

const heights = sections.map((section, i) => {
  if (i) {
    cummulativeHeight += section.offsetHeight;
    return cummulativeHeight - 100;
  } else {
    return 0;
  }
});

links.forEach((link, i) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    const target = st.start + heights[i];
    console.log(target)
    gsap.to(window, {
      ease: "none",
      scrollTo: target,
      overwrite: "auto"
    });
  });
});

The idea is to use the ScrollTrigger instance's start point and add the height of each section to that (plus all that padding, margin, etc.) to get the final value, but unfortunately those calculations are not 100% accurate, most likely because of the layout structure you have in place.

 

Hopefully this serves as a good starting point. If you keep having issues, please reduce the code of your demo to a bare minimum, just a few colored divs, as little CSS as possible and only the relevant JS in order to replicate the issue.

Happy Tweening!

[RyanReese]

I have further reduced my codepen and I do not believe it's CSS causing the issue, but something with GSAP. I'll try implementing your function you've posted.

[Rodrigo]

Hi,

 

The demo of your latest post is still using the getScrollLookUp function and not the code I implemented in my previous demo.

 

As you can see the getScrollLookUp method works fine in this demo:

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

 

But in your's there has to be something that is breaking it, that's why I suggested a different approach, also is worth noticing that your demo still has a lot of HTML and JS that most likely is not needed to make your point in this one.

 

The one thing I can think of is to make that particular nav pinned in a different ScrollTrigger instance without any pin spacing. Most likely that is throwing off the calculations, but as I mentioned before, we don't have the time resources to go through all that and create a custom example for you at this moment.

 

Another option would be to create that navbar as a fixed element but that is not visible until you reach that section, then you can show/hide it using ScrollTrigger's onEnter(Back) and onLeave(Back) callbacks and see if that helps. If I was you I would start with something extremely simple and not all that HTML/CSS/JS in order to create something that works as expected and then start adding more complexity in terms of the styling.

 

Happy Tweening!

[RyanReese]

I'm coming back here to say that basically your first codepen was enough for me to work it in and adjust how I was doing things. Thank you for your help!