NavBar Top and Bottom show/hide

[fernandocomet]

I am building a site where the User sees initially a top NavBar and when scrolling that NavBar disappears and other NavBar on the bottom appears.

 

I wonder if this approach is good, maybe it can be improved

 

Thanks in advance

See the Pen RwzprKe by fernandocomet (@fernandocomet) on CodePen

[Rodrigo]

Hi,

 

If is not broken don't fix it right?

 

I will make it shorter though:

var navTop = gsap.to('.navbar', {
  y:'-=100',
  duration:0.3,
  ease:'power2.in',
  scrollTrigger: {
    trigger: ".navbar",
    start: "10px top",
    onEnter: (self) => self.animation.play(),
    onLeaveBack: (self) => self.animation.reverse(),
    markers:true
  }
});

var navBottom = gsap.to('.bottombar', {
  y:'-=100',
  duration:0.3,
  ease:'power2.in',
  scrollTrigger: {
    trigger: ".reference",
    start: "10px bottom",
    onEnter: (self) => self.animation.play(),
    onLeaveBack: (self) => self.animation.reverse(),
    markers:true
  }
});

Beyond that, which is just less code, I can't think of a way to improve this.

 

Happy Tweening!

[fernandocomet]

Looks good! Thanks Rodrigo!