ektorp Posted October 5, 2021 Share Posted October 5, 2021 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 More sharing options...
Cassie Posted October 5, 2021 Share Posted October 5, 2021 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! 2 Link to comment Share on other sites More sharing options...
ektorp Posted October 5, 2021 Author Share Posted October 5, 2021 @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 More sharing options...
ektorp Posted October 5, 2021 Author Share Posted October 5, 2021 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 More sharing options...
OSUblake Posted October 5, 2021 Share Posted October 5, 2021 1 hour ago, ektorp said: If possible, for future reference, it would be great to know why my initial (now public) implementation was getting the JS error. Anonymous functions aren't hoisted. 4 Link to comment Share on other sites More sharing options...
ektorp Posted October 5, 2021 Author Share Posted October 5, 2021 Thank you @OSUblake for the simple and obvious issue with this...it's most appreciated. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now