Centering a layer on click using FramerJS

Question

The goal is to move the button layer vertically upwards from the bottom the middle of the screen, whilst growing to a larger size. However, upon clicking the layer it does not move to the exact center. It moves up but shifts to the right. Why is this?

Code

bg = new BackgroundLayer
    backgroundColor: "#f39c12"

button = new Layer
    width:  100
    height: 100
    borderRadius: 100
    backgroundColor: "white"
    x: Align.center
    y: Align.bottom(-100)

button.on Events.Click, ->
    button.states.next()

button.states = 
    StateA:
        width:  300
        height: 300
        borderRadius: 300
        y: Align.center 

Answer 1

When you enlarge the height and width of the button, the button will enlarge, but its x and y properties may not change as you expect.

Instead, try adjusting scale in StateA:

button.states = 
    StateA:
        borderRadius: 300
        y: Align.center
        scale: 3

Answer 2

The reason is that Align.center is something that is only calculated when you create the layer or a state. For that reason, adding x: Align.center to the state also doesn't work (as you might expect it to).

However, there is an easy way to do this, by setting the midX property of the state to Screen.midX. Full example:

bg = new BackgroundLayer
    backgroundColor: "#f39c12"

button = new Layer
    width:  100
    height: 100
    borderRadius: 100
    backgroundColor: "white"
    x: Align.center
    y: Align.bottom(-100)

button.on Events.Click, ->
    button.states.next()

button.states = 
    StateA:
        width:  300
        height: 300
        borderRadius: 300
        y: Align.center 
        midX: Screen.midX

Working prototype can be found here: https://framer.cloud/RsULi