Scroll · Motion for React

Header condense on scroll

The header shrinks, gains a background, and hides on scroll-down.

Live preview

BrandMenu

Scroll down to shrink and hide the header, scroll up to bring it back.

scroll

Copy the prompt

Ask for it in plain words

Shrink my sticky header as I scroll down and give it a solid background, hide it while I keep scrolling down, and bring it straight back when I scroll up.

Need both prompts plus the metadata in one file?