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!

Thanks,

Hi Junko3,

Thank you so much for your reply and your generous encouragement. I literally have no one in my contact to seek help from, so happy to gain some help here.

Here is the tutorial I followed. Where the content on [Mobile Landing Page] has the interaction of “on drag” and navigate to [Mobile Landing Page2]. It should work as it’s shown in the Youtube tutorial, however it’s not happening with my prototype, yet…

I’ll keep trying. If you have a moment to take another look, I would really appreciate.

Thanks again,
Ella

Hi @Ella_Liao, Thank you for sharing the YouTube video you refer to. This video appears to have two separate tutorials, one “on drag” and one “after delay.”

And it seems “After delay” interaction has been set on the [MobileLanding Page] frame in your prototype. If you want to see the results of following the “On Drag” tutorial in this YouTube video, please double-check the prototype settings for both frames.

Please note that the UI might have changed slightly since the video seems to be created in the past. To assist you better, I’ll share a current example for your reference.

I hope this clarifies things for you a bit. We continue to welcome insights from other community members!