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

What is Framer? Join the Community
Return to index
Andrei Herasimchuk
Posted Nov 21 - Read on Facebook

Hello all. Posting a general question, even though I feel silly thinking I'm making an obvious mistake somewhere... But whatever. Here goes.

I'm trying to make a pagination widget in Framer Studio, and I decided to use a simple for loop structure to do so. It looks like this:

totalPages = [1..5] # This will be an array of PSD layers later
markerGap = 40

for pageNumber in totalPages
pageMarker = new Layer
superLayer: action
name: "marker" + pageNumber
x: markerGap
y: action.height - 25
width: 11
height: 11
if pageNumber is 1
pageMarker.backgroundColor = "rgb(255 ,255, 255)"
pageMarker.backgroundColor = "rgb(0, 0, 0)" = "border": "1px solid rgb(255, 255, 255)"
pageMarker.borderRadius = pageMarker.width/2
markerGap += 20

This does what I expect, creates five dots with the first one filled to indicate Page 1 is active for the default state. I can change totalPages to get more markers, etc., and it all draws fine. I'll be using some layers in a PSD file in totalPages, but for now, it's just numbers to create objects.

So, my question is this: How do I call the different pageMarker objects so I can set different states or properties? I've tried all of the various object name notations in JS that I can remember, but all I keep getting back is undefined. What I was trying to do was something like this:

pageMarker["marker3"].backgroundColor = "rgb (124, 124, 124)"

Thinking that the "name" property might be used to grab the object, but no dice (because I've not created an array here I assume). And there doesn't appear to be a Framer Utils function that will allow me to grab the object once it's been created.

I also tried using something like:

paginationWidget = for pageNumber in totalPages

But the values returned when I print paginationWidget is a set of numbers: [60,80,100,120,140] in this case.

It seems that the only way to get the object is to give it a unique variable name when you make the layer in the first place. And if that's true, how should I go about doing that using a for loop statement like above? (IOW, how would I create a variable in pageMarker that becomes unique each time the loop is iterated.

Like I said, I feel like I'm making a rookie mistake somewhere, and it's been a few years since I've touched JS, so I'm blanking here.

Help? Thoughts?


Jorn van Dijk

Can you share your prototype?

Andrei Herasimchuk

Unfortunately... no... It's a private work at the moment for someone I know looking to build a company using it for a pitch.

Marcelo Eduardo Oliveira

Andrei, not sure if you tried this, but what I think its missing is to actually have the collection of pageMarkers :

I usually do this:

totalPages = [1..5] # This will be an array of PSD layers later
markerGap = 40
pageMarkers = []
for pageNumber in totalPages
pageMarkers[pageNumber] = new Layer .... your code

So after this was created, you can use something similar to what you did:

pageMarkers[3].backgroundColor... ( where 3 is any number between 1-5)

Also, like you asked, I use this kind of loop:

for i in [1..totalPages

Marcelo Eduardo Oliveira


totalPages = 5

for i in [1..totalPages]
pageMarkers[i] = new Layer

Andrei Herasimchuk

Marcelo Eduardo Oliveira, Bingo! Like I said, I knew it was a rookie mistake. I was forgetting to create the pageNumbers var as an empty array prior to filling it. In one try, I had pageMarkers[pageNumber] in the for loop, but it wasn't working. Creating the var as a an array fixes it. You just saved me a ton of time. Thanks!

Read the entire post on Facebook