Jump to content
Search Community
Sukru test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Sukru changed the title to Gsap Sticky Menu
  • Solution



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!

Link to comment
Share on other sites



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!

Link to comment
Share on other sites


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.

Link to comment
Share on other sites

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



Gsap code




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


Thank you...


My code;

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) {
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];
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



Link to comment
Share on other sites



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!

  • Like 1
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...