Help with Scroll Direction-Based Navbar Hide/Show Animation

[newyorker]

Hi everyone,

 

I'm working on implementing a hide/show effect on my Navbar based on scroll direction, inspired by the navbar animation I saw  on this website. My current implementation works fine, but my hide/show animation doesn't quite capture the same feel as the example. I'd really appreciate it if someone could guide me in the right direction to replicate this animation more effectively.

 

Thank you in advance.

Example:

https://wethinkelastic.com/expertises.html

StackBlitz demo: 

https://stackblitz.com/edit/nextjs-xgurhv?file=components%2FNavbar.jsx

 

 

 

[Rodrigo]

Hi,

 

First when using React always use GSAP Context:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Also take a look at the resources we have here:

https://gsap.com/resources/React

 

Finally take a look at this demo:

See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[newyorker]

Thank you for your response @Rodrigo , this is indeed the animation I wanted to achieve!

I've took your advice, and implemented GSAP Context into my component along with your solution. After making all the changes I've encountered a specific issue that I'm still trying to resolve.
 

Issue: When a user scrolls down rapidly from the top of the page, the navbar does not hide, and the hide/show animation does not trigger. In contrast, when scrolling slowly, the animation functions without any problems.
 

Observations and Assumptions:

• I believe the issue might be related to the conditional application of CSS transitions in my component. Specifically, the transitions for certain navbar properties are controlled by the enableTransition state.
• This state is set to true after the user scrolls past a certain threshold, which in my case is 500px.
• The problem seems to occur only with rapid scrolling from the top, suggesting it might be linked to how the state change interacts with the ScrollTrigger or the speed of the scroll event.

Given these observations, I'm wondering if there's a recommended approach to ensure that the navbar's hide/show animation is triggered consistently, regardless of the scroll speed. Is there a way to optimize the interaction between GSAP animations, React state changes, and CSS transitions to address this fast-scroll scenario?

I've also created a new demo which contains the new implementation which can be found here:
https://stackblitz.com/edit/nextjs-l5mhei?file=components%2FNavbar.jsx
 

 

[mvaneijgen]

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete.