Jump to content
Search Community

Layered pinning from bottom - ScrollTrigger

Alien test
Moderator Tag

Recommended Posts

I had create the navigation to link each section and it's work to click to scroll to the section but when click the home button, it can't scroll to the section keep stay in the Section 01.

Link to comment
Share on other sites



The issue is that the calculations ScrollTrigger is making here when creating the linkST instances:

let menu = gsap.utils.toArray(".nav a");
menu.forEach((a) => {
  let element = document.querySelector(a.getAttribute("href")),
    linkST = ScrollTrigger.create({
      trigger: element,
      start: "top top"
  a.addEventListener("click", (e) => {
    gsap.to(window, { duration: 1, scrollTo: linkST.start, overwrite: "auto" });

Are being affected by the ScrollTrigger instances created in the panels loop. Since you know that the home section is at the top of the document just use zero there:

a.addEventListener("click", (e) => {
  const target = e.target.getAttribute("href") === "#home" ? 0 : linkST.start;
  gsap.to(window, {
    duration: 1,
    scrollTo: target,
    overwrite: "auto",

Finally is worth noticing  that pinType : "sticky" is not an option. It's either "fixed" or "transform" 


"fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP). 


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