Search the Community
Showing results for tags 'navbar'.
Found 4 results
-
I am trying to achieve the following: Once the User starts scrolling, the Navbar collapses to a maximum height of 48px as much. Also some letters get opacity 0 unless there is an hover Problem I see is that in low resolutions it is scaling more. Probably there is a better approach for this Any help is welcome
-
Hello, I'm pretty new at this and this is my first post so I'll try to be as clear as possible but bare with me please. The codepen attached is essentially what I want to do for this site in terms of functionality. I'm struggling with the menu portion because it is a horizontal website and I can't just add the ids to the href. I tried using scrollTo but I haven't had any luck so I'm wondering if someone can help me. The idea is to have the menu flow throughout all the sections in a sticky-like position. When you click on one of the menu links it sends you to the corresponding section regardless of where you are on the website. Right now I'm thinking scrollTo but I'm open to other methods/animations as long as it takes you to the particular sections which is what I can't figure out. I'd appreciate any help. Thanks!
-
How to have Scroll Trigger have 50% of screen height as the end point
pixelbakery posted a topic in GSAP
Hiya, I tried searching around but couldn't find anything, so forgive me if this is a repeat question. I have a fixed nav bar at the top of my site that I want to animate in on the initial page load (I think I have this part under control). When the user scrolls I want parts of it to animate out and disappear once they've moved downwards 50% of the total screen height. It's not wrapped in a 100vh container because obviously it's a nav, and all of the first sections have different heights so I can't base it off of that. What's the best approach for this? Create a dummy element with a super negative z-index? I thought the answer was `document.body`, but then I realized that makes no sense because the body is super long. I'm using reactjs. No jQuery in this household =] Thanks -
Hello there! I am new to GSAP and I want to animate a navbar to shrink whenever the user scrolls down and grow when the viewport is back at the top. So far, I have been trying ScrollTrigger to achieve this, and it works completely fine until I refresh the webpage on the middle. Since it does not scroll back to the top on refresh, the new viewport will be somewhere down on the page and not the top of the window and so my animation will not work perfectly in every situation. I am attaching some screenshots to show you what I mean exactly... And then after refreshing the page this happens: Is there a way to set the animation start to the top of the window (always)? Currently my code looks like this: gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(CSSRulePlugin); gsap.to(".custom-logo-link", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: true, toggleActions: "play none none reverse" }, height: "50px", duration: 0.2 }); gsap.to(".navbar", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: false, toggleActions: "play none none reverse" }, backgroundColor: "white", duration: 0.1, boxShadow:"0px 6px 25px -7px rgba(0,0,0,0.32)" }); Any idea would be appreciated! Solution: The trigger element was a sticky navbar So I set the trigger element to a fixed element like that stripe with the phone number.
