Animated sticky header

Hi there, Thank you for reaching out! I really appreciate you sharing the file with us. I can’t believe you’re a newbie by looking at this amazing file!

In the prototypes, everything kicks off with a single interaction, each having a trigger and an action.
If I’ve got it right, you’re aiming to create an animation action where the header shrinks to a smaller size triggered by scrolling. Am I understanding correctly?

I took a peek at the [headerL] object nested in the [Mobile Landing Page] frame in [Flow 1] in your file, and it seems that no interactions have been set and the Scroll behavior has been set to Position Fixed. This setting might be the reason the header stays there when scrolling.

Currently, creating any animation triggered “on scroll” might be a bit challenging.

You can learn prototyping triggers in more detail here: Prototype triggers
And, if you’re curious, check out this feature request from our community: “On Scroll” for prototyping

One approach could be to try creating two [headerL] objects (one with the default size and another with a smaller size) and connecting them with smart animate using the “on drag” trigger.

Also, would you mind sharing the YouTube tutorial you followed for creating an animated header? We might discover some methods to achieve your goals that we’re not aware of.

Hope this sheds some light! Please let us know if I’ve missed anything.

If other our community members have any suggestions or insights, we welcome you! Feel free to join our conversation here!


1 Like