Jump to content
GreenSock

mulegoat

Locomotive + ScrollTrigger Show Hide Header

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

  • Like 3
Link to comment
Share on other sites

That's brilliant akapowl! Thank you for your help

  • Like 2
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.
×