CODEWITHSUNDEEP
coffeescriptframerjs
Samuel
Samuel

Reputation: 6146

Centering a layer on click using FramerJS

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

Upvotes: 0

Views: 167

Answers (2)

Niels
Niels

Reputation: 781

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

Upvotes: 1

vievievie
vievievie

Reputation: 338

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

Upvotes: 0

Related Questions