jillianadriana Posted April 27, 2022 Posted April 27, 2022 Hey GSAP friends, I recently found this handy post/CodePen by @mikel , which was exactly the solution I needed. I have a header with 2 parts -- the top bar has social media and some other links -- and then the bottom part is the header where the logo sits, as well as the menu and I'm going to put a search box in the far left. On scroll down, I want to hide the bottom part of the header but keep the top part sticky. I had tried using headroom.js but I couldn't figure out how to get the top bar to remain sticky. I also do prefer to use GSAP where possible because it gives me so much more control. My issue is that when my menu opens, there's a bit of extra room to scroll down because the GSAP pushes the menu up, and I don't know how to fix it. Here's a test page with 200vh of empty space so you can see what I mean. Sidenote: I don't know why the logo isn't sitting properly in the header. It was working fine and then suddenly it shifted and I haven't been able to pinpoint the issue there, so if you happen to notice what's going on there, any help would be appreciated, but since I feel like it's a CSS thing, my biggest concern is the GSAP stuff.
Cassie Posted April 27, 2022 Posted April 27, 2022 Heya! You'll need to stop the menu from resizing if the modal is open. pseudo code ScrollTrigger.create({ trigger: "nav", start: "10px top", end: 99999, onUpdate: ({progress, direction, isActive}) => { if (direction == -1 && modalIsClosed) { actionNav.reverse() } if (direction == 1 && modalIsClosed) { actionNav.play() } } }); Hope that helps! (You've got a ton of padding shifting it out of the layout btw)
jillianadriana Posted April 27, 2022 Author Posted April 27, 2022 @Cassie That code definitely prevents the scroll from happening but it seems to break the actual header animation. You can take a look on the test page again: https://mattiejames.flywheelstaging.com/test-page/
Cassie Posted April 27, 2022 Posted April 27, 2022 That was just pseudo code - not a snippet to copy paste. Have you defined a modalIsClosed variable? Please provide a minimal demo if you'd like more help - thanks!
jillianadriana Posted April 27, 2022 Author Posted April 27, 2022 Here is a minimal demo See the Pen dyJxWae by jillianadriana (@jillianadriana) on CodePen.
Solution Cassie Posted April 27, 2022 Solution Posted April 27, 2022 See the Pen yLpmobq?editors=0010 by GreenSock (@GreenSock) on CodePen. Cool, thanks! You just need to toggle a boolean in your open and close functions ✨ 2
jillianadriana Posted April 27, 2022 Author Posted April 27, 2022 THANK YOU! I could've spent days trying to figure this out. 1
Cassie Posted April 27, 2022 Posted April 27, 2022 No worries! That menu is lovely too by the way. Nice job. 2
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