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

What is Framer? Join the Community
Return to index
Eli Beitzuri
Posted Aug 18 - Read on Facebook

Are there more performant ways to use placeBefore()?

I have a virtual screen I need to dynamically re-order in this way. Using placeBefore() in the onTap function causes a very noticeable lag in the prototype responding to the tap.

8 Comments

Charlie Deets

maybe use two instances of the same layer, positioned one in front of and one behind the alternate layer. then display or don't depending on where you want it to display in the hierarchy.

Charlie Deets

your delay might be from the touch gesture. try using onClick.

Sigurd Tapio Mannsåker

I've never tried it before, but you could maybe attempt setting the z-index of the DIV directly via layer._element. It may be useful to have a look at what placeBefore() does under the hood here: https://github.com/koenbok/Framer/blob/master/framer/Layer.coffee

Eli Beitzuri

Thanks for the suggestion Sigurd! Solved by using layer.index instead:

layer.index = targetLayer.index + 1

So much faster.

George Kedenburg III

how complex is your layer hierarchy? peeking at how placeBefore works, it uses index too but it also loops through all the sibling layers. maybe theres a more performant way to do this Koen? https://github.com/koenbok/Framer/blob/master/framer/Layer.coffee#L944

Koen Bok

Could I check your project out? Because all the function really does is get the sibling layers, loop through them and change the css z-index. I can't see what part of that might be slow. cc Edwin Van Rijkom

Eli Beitzuri

Well this is super weird. I opened a version of my prototype that was using placeBefore() and performance is fine now. Also tried reverting a line in the current prototype and that also is working just fine. Maybe a hair slower than saying index+1, but nowhere near the lag I was seeing yesterday. Gremlins?

Koen Bok

Or just good prototype karma. I get this a lot ;-)

Read the entire post on Facebook