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

What is Framer? Join the Community
Return to index
Peter Hilgersom
Posted Jan 30 - Read on Facebook

Hi all,

I have a container frame (blue in the gif), and in that a smaller frame (white). Can I align the smaller frame to the bottom of the container frame? I want to expand the height of the smaller frame and have it 'push' off the bottom to simulate a menu sliding upwards. Or is there a better solution to this?

Gif for demonstration. Here I adjust the height on click, and it goes down. But I want it to go up ^_^

15 Comments

Fran Pérez

What about something like this: http://share.framerjs.com/k9rbzhu7cq7r/

Benjamin Den Boer

Hey Peter, an easy way to push your frame to the bottom of your container is by using maxY, minus the height of your frame. Then, you can offset the height animation to make it appear to stick to the bottom:
http://share.framerjs.com/hgexwqvllkgl/

Chad Lonberger

Fran Pérez does that work? I didn't realize layers emitted their own events on property changes.

Fran Pérez
Chad Lonberger

Wow awesome thanks. I've been building models to help fire some of my emitters manually on updates. This will really simplify things. #facepalm

Peter Hilgersom

Oh you guys.. works perfectly. Can you take me through the train of thought there? Im having a hard time understanding why it works like this.

Benjamin Den Boer

Hey Peter, I made this quick graphic for you to try and explain how it works step-by-step. Hope this clarifies things a bit. :)
See: http://cl.ly/ZWju

Peter Hilgersom

You're the best Benjamin Den Boer. Held ;) You're method and Fran Pérez method are the same but a slightly different approach right? Fran's looking at the boundary of a frame and you're taking the boundary of the canvas (maxY). It's the same thing but different measurements. I get it now though. On the click you do 2 things at once. You change the Y position of the white box and you also animate the height. Making it visually trick into expanding upwards. Smart thinking! Thanks guys!

Peter Hilgersom

with this I recreated the wunderlist dock button, thanks all for your help! :) http://share.framerjs.com/llnxwcs3oy0q/

Fran Pérez

Hey Peter, instead of doing this for every layer:

shareicon = wunderlistdockLayers["shareicon"]

You could add this at the beginning of your code:

for layer of wunderlistdockLayers then window[layer] = wunderlistdockLayers[layer]

And just call the layer normally: shareicon.whatever

:)

Peter Hilgersom

hi Fran Pérez , that makes a lot more sense. Thanks for the tip! Much less code :D

Joshua Tucker

I am totally contrary to everyone's suggestion, but usually if I need to do something like this and its simple (say like the height), I use scaleY and set the origin point where I can so it expands correctly – it requires some basic math but it works well and seems to require less code.

Peter Hilgersom

Im interested! Can you give a basic example Joshua Tucker?

Benjamin Den Boer

Heya Peter! Joshua is referring to using scale to grow/shrink layers instead of width/height and then using the originX/originY to dictate the direction of the animation instead of offsetting it.

Here is an example:
http://share.framerjs.com/ltdweagg72fh/

Note that while in some cases this works really well - and may require less code - using scale effectively 'stretches' your layer. For example, if you edit the example above and set a high border radius to the layer that is being scaled, you'll notice that the corners will appear deformed. Using the width/height technique prevents this. :)

Joshua Tucker

Benjamin Den Boer Peter Hilgersom Thanks Ben! Appreciate you stepping in. I was just about to start working on mine :). Perfect! And yes, scaling can be an issue if you're using images or certain shadows.

Read the entire post on Facebook