Hide Pledge Bar while scrolling down

[sirjamesgray]

• as a user, when I scroll down on a page, the Pledge bar should tuck away below the fold.
• When I scroll back up the Pledge bar should slide back up with a subtle spring animation.
• This will make for a pleasant and immersive reading experience, while still putting prominence to the pledge bar.

we'll also collapse the title header when scrolling down #128

• Prototype link
• Figma link

https://github.com/user-attachments/assets/88c2a83d-d681-43b8-a787-61c5adce981a

[asseph]

I changed it like this. Whenever the user scrolls up and down, the pledge bar hides, but when they stop scrolling, it appears after 1 second.

[sirjamesgray]

I think we should go with the original implementation instead. Appearing / disappearing doesn't really communicate a logical continuity.

Plus substack uses this pattern where the footer animates out of sight on scroll down (reading intent) and immediately slides back into view upon scroll-up. (scrolling up is the end of the reading intent, whereas the implementation from the QA push interrupts the user again while they're presumably still reading)

We can use Framer Motion if that makes things easier to implement https://www.framer.com/motion/

[sirjamesgray]

plus another problem with the fade-in fade-out approach is that the background blur doesn't animate so it snaps awkwardly from translucent to transparent

https://github.com/user-attachments/assets/b60f8940-4d7b-4722-aa60-f4d5a79b3255