JavaScript for Framer: Align

I am one of those people who are struggling with coding as a designer. I have always been interested about interaction design especially web. So I couldn’t no longer avoid to learn JavaScript(Framer) and then I decided to record what I didn’t know and how I figured it out.

For beginner

I would like to write for beginner or who isn’t familiar about coding like me.

Before I start to talk about align, I would like to quick review how to write properties in layer.

There are two different ways to give properties like below;

layer = new Layer 
    backgroundColor: "darkblue"
#or
layer = new Layer
layer.backgroundColor = "darkblue"

Let’s start Align

Align is

The Align functions help you quickly position an object on the screen relative to its parent. Use these to place a Layer to the top, bottom, left, right or center of its parent. They can be used as layer properties, in states and animations.

• position an object on the screen
• functions
• It can be used as a property, in states and in animations

X: left, right, center 
Y: top, bottom, center

#Also, you can use like below:
   layer.center()
   layer.centerX(offset)
   layer.centerY(offset)

• align.bottom(offset)

offset is a number and it is optional.

It might not be related about align section but I had to understand about x, y coordinates to use offset. At first, I didn’t have any idea how to write or calculate values of x and y in framer or JS. Because I had thought coordinates like left image below. Finally I found how x and y coordinate value work on DOM(screen) like right image.

If the blue rectangle is one layer, the red dot is being x and y coordinate value. You can position the layer using the value of the red dot where you want.

So, let’s move to align again.

If you want to move the blue layer position to the yellow layer position,

you can use x offset (-50) and y offset (50).

#states example

layerA.states =
stateA:
x: Align.right
y: Align.bottom
stateB:
x: Align.left
y: Align.top
layerA.onTap -> layerA.stateCycle()

Last tip. Coffee script comment.

#This is a short comment.

###
This is a multiple comment.
###

I hope my infographics will help you to understand JavaScript for Framer. Cheers🦊❤️

That’t all for now❤️

😄

Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.

Master 30 front-end skills — FrontEnd30

🎉🎉🎉🎉🎉 Happy Coding Today 🎉🎉🎉🎉