Locomotive + ScrollTrigger Show Hide Header

[mulegoat]

Hey everyone,

 

I'm building this site: https://taylorandmoor.com

I'm using locomotive scroll for smooth scrolling and scrolltrigger for various animations. One animation is to show/hide the main navigation header on scroll. As you can see this works on the website in its current state however I'd like to implement it without using locomotive data-scroll-sections. If you look at the codepen you'll see that the animation gets triggered on scroll down but not on way up until it gets back to the top. The code I'm using for this function:

 

function initShowHideHeader() {

  const header = select('.js-site-header');

  const showHeaderAnim = gsap.from(header, { 
    yPercent: -100,
    paused: true,
    duration: 0.3
  }).progress(1);

  ScrollTrigger.create({
    scroller: scroller,
    start: 'top top',
    end: 99999,
    onUpdate: (self) => {
      self.direction === -1 ? showHeaderAnim.play() : showHeaderAnim.reverse();
      console.log(self.direction);
    }
  });

}

I'm guessing the onUpdate function is not working properly which is strange because when I console log self.direction -1 is logged on scroll up? If anybody has anhy insight into implementing this sort of this that would be great! Many thanks

See the Pen mdMjRjd by mulegoat (@mulegoat) on CodePen

[akapowl]

Hey @mulegoat

 

To me it looks like everything is working as expected.

 

The only problem you have is that your header (which has a position: fixed) is inside of your smooth-scrolling container, which won't work because of the transfoms on the smooth-scrolling container (applied by locomotive-scroll) causing a change of context for the fixed position. Just take it out of the container.

 

Edit: You might also want to consider removing or changing the transition you have set in CSS on the header, as the way it is set up now, it interferes with the GSAP animation.

 

See the Pen 643c28bb8e9b1aeb78e5c2386d21f861 by akapowl (@akapowl) on CodePen

 

[mulegoat]

That's brilliant akapowl! Thank you for your help