Fix navigation when first section is on view more than 90vh and remove when last section scrolled more than 10vh down

[Vadim Volnitskyi]

Hello everyone, I've tried to fix the navigation bar, but it works not fine; what should I change to make it visible when the first section is in the viewport more than 90% and unfix it when the last section is strolled more than 10% down? It should refresh when we get back to the container.

 

Here is my code for this:

const tlfour = gsap.timeline({
  scrollTrigger: {
    trigger: ".carousel-inner",
    start: "top-=100px",
    end: "0",
    marker: true,
    toggleActions: "play none none reverse",
    endTrigger: panels[panels.length - 1]
  }
});
 

tlfour.to(".carousel-navigation", {
  position: "sticky",
  bottom: 100
});

 

See the Pen vYMOYmd?editors=1010 by vadimvolnitsky (@vadimvolnitsky) on CodePen

[mvaneijgen]

Check out my post how to create a card stacking effect. It shows how you can create one timeline with one ScrollTrigger to control an animation. I would then also add your nav bar to the animation and don't fiddle with adding or removing classes, just add everything to one big animation. 

 

 

 

When working with ScrollTrigger I would never use position: sticky. When  you want to stick something use pin: true, in the ScrollTrigger settings

 

I would advise you to take a look at my post and first just focus on the animation, remove everything to do with ScrollTrigger and just focus on the flow you want to happen. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ you'll probably want to use the position parameter when creating the animation.

 

You can of course go the route you're doing, but you'll then will need another 500 lines of code to fixes everything and figure out every edge case. Working with one timeline will be so much more simple. 

 

Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Happy Tweening!

[Vadim Volnitskyi]

2 hours ago, Rodrigo said:

Hi,

 

Maybe something like this:

 

 

 

Happy Tweening!

Thank you!