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

What is Framer? Join the Community
Return to index
Berend Holtland
Posted Jul 16 - Read on Facebook

Hi Guys,
I'm stuck at a project i'm working on. http://share.framerjs.com/sodvag79i68y/
When you drag the green/red layer up, it scales from 0.8 to 1. What i'm trying to do is the following:
During the scaling, i want the green/red layer to cover the navigation bar in the bottom. I tried doing this by increasing the scrollComponent height by calculating it with the scale of the green/red layer. However, when the images begins scaling, it won't scroll to the top anymore.. For now i have deleted the increasing height of the scrollcomponent.
Do you guys have a solution to this problem? If it needs more explanation, please ask me! :)

4 Comments

Kevin van der Wijst

Someone knows how to help on this one?

Benjamin Den Boer

Hey Berend Holtland and Kevin van der Wijst - this is entirely possible, but you'll need to set-up your document a little differently. In general, you'll want the content and the tabBar to be within the same superLayer, so there aren't any hierarchy issues. Secondly, the card is scaled and positioned below the navBar in your prototype, which means that if you'd adjust the hierarchy on scroll, it would instantly sit infront of the navBar and overflow. If I understand correctly, you want it to gently scale on top of the navBar. This means that it has to be "above" of the navBar on start, and then only overflow by updating the scale / height. So basically: 1. Same superLayer, 2. Not overlapping on start, 3. Update hierarchy on start (card > tabBar) and finally scale on scroll. Hope this helps! :-) Tried to visualize this a bit here too →

Kevin van der Wijst

Sweet, thanks for the explanation! We're going to fiddle with this approach here to make it work

Berend Holtland

Wow thanks for the great explanation! :D we'll be trying this one

Read the entire post on Facebook