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

What is Framer? Join the Community
Return to index
Nam Dang
Posted Jun 21 - Read on Facebook

Hi folks, i'm looking for a way to retrieve x/y coord of the element when using flexbox in Framer. The problem is when I push flex items into array and using method item[i].x always return 0. Any thoughts?
Link cloud: https://framer.cloud/sXtMu

3 Comments

Brian Williams

Out of interest why do you need it?

Felix Haus

Framer uses internally an absolute position system, and all layers have a programmatically calculated position (x/y) which is not affected by CSS rules.
So x and y will always return 0 even if you give them top / left rules with css.

For example:
layer = new Layer
style:
"top":"50px"
"position": "absolute"

print layer.y

To get the actual position of the HTML-Element you can do something like:
print cardArr[1]._element.getBoundingClientRect().left
See: https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect

Nam Dang

So I took my prototype to Chrome and my phone to preview it and this happened. On the phone, the blue circle moved pass block 33 so I think there might be a problem which different screen resolution when using equation
(x: this._element.getBoundingClientRect().left - listWrap._element.getBoundingClientRect().left)
-> This was turned in to translate3d ( the result should be triplet to get to the correct position on Chrome, while on phone it should be less than a third)
Any idea on this matter Felix Haus?

Read the entire post on Facebook