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

Hi Nicolas! If you have one element that's always visible, like a tab or navigation bar. Its easiest to extract that element from the flow component. Reposition the flow component so that it does not overlap with the fixed element and use it to switch content views.

When you want to present a fullscreen layer which should hide the fixed element you won't be able to use the same flow component. Just create another flow component or present a simple layer.

Hey Jonas Treub, Thanks for your feedback. Regarding my last question, I created an example here https://framer.cloud/KmhUW/. My issue is that I want to make a Layer becomes bigger than it's superLayer when transitioning from one screen (product list screen) to another (product screen). The green layer is supposed to be a picture and this picture is supposed to expand (full width and top of screen) when tapping on it to open a product screen. As you'll notice, the animation is not fluid so I guess there might be a better way to do that. Thanks again!

When designing such custom transitions I would not recommend using the Flow component. Just set up everything with states and switch states when clicking the layer.

Isn't it what I did in my example?

My bad. You'll want hardware acceleration to get a smooth animation. Changing width and height of layers isn't hardware accelerated while changing scale is. Make sure to never scale layers to values above 1.

To solve the hierarchy issue I would recommend not making it a child in the first place. Just position it on top of the other layer.

Thanks! I'll try this asap

hey Jonas Treub, Sorry to interrupt you again. Please look my proto https://framer.cloud/KmhUW/ I'm trying to position a mask so that it follows exactly an existing layer that is part of a scroll element. The challenge is that I'm trying to scale a picture from a scrollable layer (Carousel_size layer) to a fixed layer (Detail_size layer). Does it make sense?