Scroll to section in page taking url hash /w ScrollTrigger enabled

[Mat_Kon]

Hi everyone,

 

I'm trying to achieve this, when someone reaches my website from an external link like "www.test.co/#menu" scrolls directly to the section related with that id. I followed the example in the codepen to achieve the scrolltrigger functionality, so it is possible to mix the things together? Maybe because the sections are in absolute I'm facing issues.. Let me know!

I've already tried something like this without success:

 

if (window.location.hash) {

var hash = window.location.hash;

 

console.log(hash);

 

let getPosition = getScrollLookup(".panel:not(:last-child)", {

start: "top top",

});

console.log(getPosition(hash));

 

// then later, use the function as many times as you want to look up any of the scroll position of any ".section" element

gsap.to(window, {

scrollTo: getPosition(hash),

duration: 1,

});

}

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

[Rodrigo]

Hi @Mat_Kon and welcome to the GreenSock forums!

 

Maybe the example from this thread could help you getting started with this:

 

Unfortunately the codepen you posted does not have anything related to url hashes or something of the sort. The main idea is to add labels to a timeline controlled by ScrollTrigger and then find the corresponding label  for the hash and scroll to the particular scroll position given by that label.

 

Hopefully this helps.

Happy Tweening!

[Mat_Kon]

Hey @Rodrigo thank you very much for your support!

 

Edit:

 

With your suggestion, I was able to achieve it, looking also at this post:

 

Basically, I managed everything as a timeline and then added the ScrollToPlugin to manage the scroll on load as follow:

 

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

  // gsap responsive controller
  let mm = gsap.matchMedia();

  // Array gsap for panels
  const panels = gsap.utils.toArray(".panel:not(:last-child)");

  // Initialize gsap only in desktop version
  mm.add("(min-width: 990px)", () => {

    // Set a timeline to control better the ScrollTrigger in the page
    const timeline = gsap.timeline({
      scrollTrigger: {
        trigger: ".page--home",
        start: "top top",
        end: () => "+=" + innerHeight * panels.length,
        scrub: true,
        pin: true
      },
    });

    // Set gsap scrollTrigger event on each panel
    panels.forEach(function (e, i) {
      timeline.to(
        e,
        {
          yPercent: -100,
          ease: "none",
          stagger: 0.5,
        },
        i
      );
    });

    /* Manage scroll to section on page load if hash in url */
    if (window.location.hash) {
      // Get hash
      var hash = window.location.hash;

      // Get the panel number by data attribute
      let panelNumber = parseInt($(hash).data("panel"));

      // Gsap scroll to the numbered section
      gsap.to(window, { scrollTo: panelNumber * innerHeight });
    }
  });

  // Set gsap zindex of each panel to show the first with the highest index (absolute panels)
  gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i })

Hope this helps others with the same issue!

[Rodrigo]

Hi,

 

In the example you linked in your first post the elements have a position absolute and the helper function you're using doesn't work in that case since the top position of every element is basically the same. That's why I suggested that example that uses labels and the percentage of the animation where each label is. Similar to this helper function:

https://greensock.com/docs/v3/HelperFunctions#getScrollPosition

 

But is great to hear that you got it working, great job!! 👍

 

Let us know if you have more questions.

Happy Tweening!