This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Lukas Imrich
Posted Jun 22 - Read on Facebook

Dear Framers,

I am trying ti achieve this animation with framer. The same animation could be found in play store app, and apps category. The point is that while scrolling down, the header partially hides so title is not visibly.
Can you help and tell me, what components shall I use and how shall I control them?

At the moment, I have quite a hacky solution, in which the first scroll item is actually the header and i keep that first item partially revealed and sticky while scrolling down. However it makes eveything complicated, once i combine it with page component.

Thanks for any try to help me

4 Comments

Jacky Lee

Have you tried detecting the scroll y value on scroll? (If scrollY more than xxx, change state of top bar)

Balraj Chana

The weather app does exactly what you want: http://framerjs.com/examples/preview/#weather-app.framer

Claudio Guglieri Lillo

Hey Lukas, two ways at the top of my head.
1. You can go with an "IF scrollY" inside scroll.on Events..." or
2. Use Utils.modulate to have the bar nicely animated when scrolling down and then locking itself to the top.

Lukas Imrich

Thank you guys for the help, now the options to build that are much clearer.

Read the entire post on Facebook