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

What is Framer? Join the Community
Return to index
Bud Sigur
Posted Jun 03 - Read on Facebook

Hello everybody, I'm back with another question.

I want to change visibility of certain layers for each page of the pageComponent. I tried using an if/else statement and currentPage, but it doesn't work. For this specific example, I want to remove a button from the screen when I swipe to the next page.

Here is my code:

if pager.currentPage != contentMySamples
button.visible = false

Thanks :)

28 Comments

Anton Jarl

Could you share more?

Bud Sigur

I have three sections (pages) in this prototype. I want the title in the navbar at the top to change as I swipe through pages.

Here's the link:
http://codepen.io/marinobrnardic/pen/xVvWqg?editors=0010

Anton Jarl

All image URL's are broken. Private maybe?

Bud Sigur

No, I've set all links to public

Anton Jarl

Oh, correct. The topNav image just gives a 404 :)

Bud Sigur

idk, it works for me. :) Can you help me with the question?

Anton Jarl

Sure. First off it seemed to work with your initial question with making the button invisible.

Anton Jarl

But, you would like to switch the text in the navbar to change depending on witch page you're on?

First we need to create a layer to hold the text and then switch it. Hang on and I'll have a look

Bud Sigur

It doesnt' have to be text, I have separate layers for every page, but changing text works fine for me also. :)

Anton Jarl

Really ugly code here!

titles = ["Page #1", "Page #2", "Page #3"]

topNav.html = titles[0]

pager.on "change:currentPage", ->
page = pager.currentPage.id

switch page
when 1 then topNav.html = titles[0]
when 4 then topNav.html = titles[1]
when 7 then topNav.html = titles[2]

Anton Jarl

Basically I created a new array called "titles" that holds all your page titles. And then everytime the page component is changing page I check for the ID of the new page and switch the title.

Using this approach you have to map the ID's of the pages to the titles in the array. This could be done nicer and more scalable in other ways but this works with a quick prototype with just a few pages.

Bud Sigur

Thanks a lot! :)

Bud Sigur

I must say that I don't get your code completely. What do numbers 1, 4 and 7 mean? I assume that they are the currentPage.id, but where did you get them? Also, I would like to use png images as titles instead of html elements.

Anton Jarl

Those numbers are generated from framer. I just used "print currentPage.id" to see those Id's and then use them. And as I wrote, it works for this particular prototype, but to make it scale a little bit better we need to make some changes.

Regarding using images instead of html that no problem. I can have a look at it soon!

Bud Sigur

Thanks man, you're a life saver. :D

Anton Jarl

So, that's a new fork. I created three image and shared from google drive (red, blue, green) and then create variables for those images called topNavBlue, topNavRed etc.

Then instead of changing the HTML of the layer, we switch the image of the layer.

Also, I added a new property in your three different page layer, calle "name", and I prefixed the name with "name" so it should be quite clear. Now your three different pages have names, and that's what we look for in our page changing event.

So basically, if the current page is called "nameMySamplesContainer" then we switch to our blue header image.

Bud Sigur

You're the man! (y) Thanks a lot!

Bud Sigur

Sorry to bother again, but if I give a name to profileContainer it makes the width of the container twice as small. The same happens with your fork.

Anton Jarl

Yeah, strangely enough it makes it 200px instead of 360px.

But adding the "name" propert AFTER the "width" property fixes it. Can't really say why though....

Anton Jarl

Bud Sigur

Thanks man. I don't know if it's just me or Framer acts funny sometimes. If I do it like you did in the screenshot above, I get an error:

[stdin]:53:7: error: unexpected :
name: "nameProfileContainer"

But it works fine if I do it like this:

name.profileContainer = "nameProfileContainer"

Is it possible that some of framers features don't work without an iOs app or something?

Anton Jarl

Should be the same framer.js in the background, so it shouldn't differ

Bud Sigur

Yeah, that's what I thought but still...

Another thing...

The scrollComponent in the Profile page works fine when I'm working in Codepen, but when I do it locally with Atom it acts weird. When I try to scroll it always springs back to the top.

Anton Jarl

Regarding the first problem, make sure the the indentation is correct when you copy and paste. I realise that sometimes Codepen generates different indentation when you copy from there. Or maybe Codepen isn't as picky. So I think that name: "nameProfileContainer" should work if you make sure it's indented correctly.

Bud Sigur

Okay, I'll keep that in mind. Thanks again, I hope I won't have to bother you anymore. :D

Anton Jarl

The scroll works fine on both Codepen and Framer Studio for me. Make sure everything is correct in atom!

Read the entire post on Facebook