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

What is Framer? Join the Community
Return to index
Dave Crow
Posted Oct 28 - Read on Facebook

Is it possible to use an array to create a list of items that don’t all have the same height? I’d like to create a list like the attached image, but the headers have different heights than the other list items. So instead of setting the y property to item * 52, I want to set it to the maxY of the previous item in the array. But I’m not sure how to do that. Thanks!

4 Comments

Joshua Tucker

Hey Dave! Here you are sir.

Marc Krenn

http://share.framerjs.com/5ybnyzhwfy00/

if index %% 3 == 0
_____cell.height = height * 1.5

... makes every third row a bit larger. To clarify: "%%" is the modulo operator which divides two values and returns the remainder. In this case, for every third row, modulo will return 0...

or index in [1...rows]
_____cells[index].y = cells[index-1].maxY + gutter

... should be self explanatory :)

Dave Crow

Ran into a hiccup. In order to create the list I posted above, I was going to manually adjust the height of the header cells by doing "cell[0].height = 63". This updates the height of the cell, but doesn't push the other layers down. What am I missing? Or is there a better way to do this?

Marc Krenn

You don't need both "cells = []" and "superLayer"

Approach 1, using a generic array "cells = []":
* "cells[i] = new layer" should be
"cell = cells[i] = new layer"
* get rid of "superLayer: sidebarItems.content"
* "cells[0].height = 63"
see line 29 here: http://share.framerjs.com/v0wcxvn1drj5/

###

Approach 2, using a superLayer-array (this is probably what you want):
* remove "cells = []"
* remove "[i]" from "cells[i]"
* "sidebarItems.content.subLayers[0].height = 63"

Read the entire post on Facebook