How to shrink a header on scroll down in Adobe XD?

Question

Is the above possible in XD? So when you scroll down the page, the header stays where it is (I know how to make a sticky header) but the logo also shrinks so it doesn't take up as much space as it does when it's full size.

Dan Rodney · Accepted Answer

You can't currently trigger events/interactions when you scroll so you can't make this perfectly yet.

One way you could prototype this is to create different arboards, which one showing the shrunken header. It won't happen on scroll, but you could link to that artboard so someone can see what it looks like when it's shrunken.

Another thing you "might" be able to do (depending on your design) is to hide the shrunken fixed header behind the current header. If the shrunken header position is fixed, it could slide out from behind the larger one when you scroll. Again it's not perfect, but could some something close enough using the features we currently have.

Harshika Verma · Answer

Hi John,

Thank you for reaching out and sharing your idea. I am not sure of the way but I found this UserVoice which I assume matches your requirements. Please check the page and confirm if this is the similar behavior you're looking for.

I am also keeping the discussion open for our experts who might have any suggestions for you.

Thanks,

Harshika

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.