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

What is Framer? Join the Community
Return to index
James Turner
Posted Dec 31 - Read on Facebook

Hi guys, I could do with some help. I'm pretty new to the design-in-code thing and I'm prototyping a pop-up menu.

You can can see from the video, my problem is with the button. It works 2 out of the 3 times it's clicked. The video does a better job of explaining.

Effectively, every 3rd time the button is clicked, it does not activate the menu's pop-up state. Any ideas where I might have gone wrong?

Also, sorry about the blur on the video. You're not drunk, it's just under an NDA.

7 Comments

Stephen Crowley

Hey James, what do the defined states look like?

Marcelo Eduardo Oliveira

Hey James , if you paste the code (without the confidential images ) we can help you more. Like Stephen said, the meaningful pieces seems to be off the screen.

James Turner

background = new Layer
width:640, height:1136

backgroundimage = new Layer
x:0, y:0, width:640, height:1831, blur:10, image:"images/Today-screen.png"
superLayer:background

background.scroll = true

offbutton = new Layer
x:255, y:1000, width:132, height:132, image:"images/Logo-off.png"

offbutton.states.animationOptions =
curve: "spring(600,30,0)"

offbutton.states.add
activate: {rotation:360, scale:1, opacity:1}

offbutton.on Events.TouchStart, ->
offbutton.states.next()

#navigation menu appears

navmenu = new Layer
x:0, y:1200, width:640, height:1167, blur:10, image:"images/Transoverlay.png"

navmenu.states.animationOptions =
curve: "ease-in-out"

navmenu.states.add
lower: {y:0}

navmenu.states.add
rise: {y:1200}

offbutton.on Events.TouchEnd, ->
navmenu.states.next()

offbutton.bringToFront()

Stephen Crowley

You can consolidate the state declaration. Just put rise{y:1200} under lower

Also, with states.next() its calling lower, rise and default which is its state on load. So you want to tell it to just call lower and rise like this: navmenu.states.next(["lower","rise"])

James Turner

Thanks Stephen Crowley! Really appreciate it!

Stephen Crowley

Anytime! Frame on!

James Turner

So, I am almost there. The button now works as it's supposed to, apart from the FIRST click. After the 1st click works peferctly, but the 1st click is not calling the navmenu states.

I've simplified the code until I figure this out:

background = new Layer
width:640, height:1136

backgroundimage = new Layer
x:0, y:0, width:640, height:1831, blur:10, image:"images/Today-screen.png"
superLayer:background

background.scroll = true

offbutton = new Layer
x:255, y:1000, width:132, height:132, image:"images/Logo off.png"

navmenu = new Layer
x:0, y:1200, width:640, height:1167, blur:10, image:"images/Transoverlay.png"

navmenu.states.animationOptions =
curve: "ease-in-out"

navmenu.states.add
rise: {y:1200}
lower: {y:0}

offbutton.on Events.Click, ->
navmenu.states.next(["rise", "lower"])

offbutton.bringToFront()

Read the entire post on Facebook