Gsap Sticky Menu

[Sukru]

Hello, I have 3 or more content and at a certain point I can make a sticky menu, but how do I make these links slide to the linked id content and I need to add an active class to the active ul li a. And when it comes to sticky menu footer, I want to hide my sitcky menu, like fadeout, when I go up from the footer again, I want to bring the menu back. Can you assist?

 

See the Pen NWErRWG by sukruemanet (@sukruemanet) on CodePen

[Rodrigo]

Hi,

 

Maybe this thread and the final example in it can provide a good starting point:

 

Also take a look at these:

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

 

See the Pen 4a9d18b3def973c8e4e5e0d106b2e664 by GreenSock (@GreenSock) on CodePen

 

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Sukru]

@Rodrigo Thank you very much. Can you help with my codepen example?

[Cassie]

There are a lot of examples here - why don't you give them a read and attempt a solution. We're here if you get stuck!

[Sukru]

@Cassie i tried it in my own local project but it didn't work so I asked for help on my own example

[Rodrigo]

Hi,

 

Your codepen example doesn't have any code for the link elements. If you check the examples in my previous post, you'll see that they share a pattern of getting the scroll position of each section.

 

Finally ScrollSmoother has a scrollTo method that comes in handy on these scenarios.

 

Happy Tweening!

[Cassie]

Quote

but it didn't work so I asked for help on my own example

 

It's also really helpful if you can explain what you tried and why it didn't work and link to an updated codepen with your attempt.

[Sukru]

@Rodrigo i made the same example in codepen, but the active class did not work. can you help me?

 

You can watch live on this page.

https://karelsite.netlify.app/hizmetlerimizmax.html

 

Gsap code

https://karelsite.netlify.app/assets/js/gsap/sticky.js

 

Codepen;

See the Pen VwVjEmv by sukruemanet (@sukruemanet) on CodePen

 

Thank you...

 

My code;

ScrollTrigger.create({

trigger: "#sticky-menu",

pin: true,

start: "top 130px",

// end: "bottom bottom",

endTrigger: "footer",

id: 'sticky-menu',

pinSpacing: false,

// markers: true,

// toggleClass: 'active',

willChange: "transform",

});

 

gsap.utils.toArray("#sticky-menu ul li").forEach(function(a) {

a.addEventListener("click", function(e) {

e.preventDefault();

const id = e.target.getAttribute("href"),

trigger = ScrollTrigger.getById(id);

gsap.to(window, {

duration: 1,

scrollTo: trigger ? trigger.end : id

});

});

});

 

const scrollSections = gsap.utils.toArray("section");

const links = gsap.utils.toArray("li");

 

scrollSections.forEach((section, i) => {

const link = links[i];

ScrollTrigger.create({

trigger: section,

start: "top 130px",

end: "bottom 130px",

onEnter: () => link.classList.add("active"),

onEnterBack: () => link.classList.add("active"),

onLeave: () => link.classList.remove("active"),

onLeaveBack: () => link.classList.remove("active"),

markers: true

});

});

 

[Rodrigo]

Hi,

 

Sorry about the problems but is virtually impossible for us to debug a live site. The code you posted doesn't raise any flags as far as I can see and your codepen example is working with basically the same code, so there must be something else that is interfering with this. Also you have a bunch of ScrollTrigger markers besides the one from that particular menu. Maybe just create that particular ScrollTrigger instance and the loop for the links after creating every other ScrollTrigger instance in your code.

 

Finally be completely sure that all the images and fonts are loaded before creating your ScrollTrigger instances.

 

Sorry I can't be of more assistance.

Happy Tweening!