Jump to content
Search Community

Toggle header based on scroll direction

ektorp test
Moderator Tag

Recommended Posts

Hello. I am trying to recreate a simple scroll effect to toggle the page header/navigation based on the user's scroll direction as done on https://www.gm.com/.

 

I have a basic setup in my attached codepen.

 

1 - Is this an acceptable approach or is there a better way to set this up as far as performance and optimization?
2 - On initial page load, everything seems to be fine as a user's scroll up and down the page. But if you scroll down into the page, and then hit the browser's refresh button, it gets an error saying that my scroll function cannot be accessed before initialization.

 

I have tried a few different things to get this resolved with no luck. Any help and assistance with this is greatly appreciated.

 

See the Pen bf4456d9f7bc3e06c30b24a274dec404 by bdang (@bdang) on CodePen

Link to comment
Share on other sites

Hey there ektorp,


I can't fork this I'm afraid as it's private. I also can't recreate the error you've mentioned

There's nothing really wrong with what you're currently doing - but I would probably do something like this. Define the animations first and then control them using play() and reverse()


 

let direction = -1;

let moveHeader = gsap.to(".header", {
  duration: 0.75,
  yPercent: -100,
  paused: true
});

let changeColor = gsap.to(".header", {
  duration: 0.5,
  backgroundColor: "rgba(255,255,255, 0.8)",
  paused: true,
});

ScrollTrigger.create({
  start: 0,
  end: "max",
  onUpdate: (self) => {
    if (self.direction !== direction) {
      self.direction === 1 ? moveHeader.play(0) : moveHeader.reverse();
      direction = self.direction;
    }
  }
});

ScrollTrigger.create({
  trigger: '.hero',
  markers: true,
  onLeave: () => changeColor.play(0),
  onEnterBack: () => changeColor.reverse(),
});


Hope this helps!

  • Like 2
Link to comment
Share on other sites

@Cassie Thank you Cassie for the response. Ok yes, this is a cleaner approach...thank you for this.

 

I have made the codepen public. Can you now view it to see the error? Again, the error only happens when you scroll down the page and the refresh the page. The scroll effect then breaks and gives the error with initialization.

Link to comment
Share on other sites

Thanks again @Cassie for your assistance with this. I did get your implementation working as needed without any errors. Thanks again for this.

 

If possible, for future reference, it would be great to know why my initial (now public) implementation was getting the JS error.

 

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