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

What is Framer? Join the Community
Return to index
Howard Einbender Jr
Posted Jul 19 - Read on Facebook

Hey Everyone! Trying to do a simple button nav where a button clicked is selected and the other buttons are deselected (scale up and scale back effect). I have my buttons in an array and through a loop but looks like I'm having issues with the conditional. Is there a way to write this with "state" events or are there any other more efficient ways to write this? My buttons click to scale up but the buttons that are not clicked don't scale back..

btnArray = [btn1, btn2, btn3, btn4, btn5]

for btns in btnArray
btns.states.a =
scale: 1.00
animationOptions:
time: .25
curve: Bezier.ease

btns.states.b =
scale: 1.25
animationOptions:
time: .25
curve: Bezier.ease

btns.stateSwitch("a")

btns.onClick (event, layer) ->
if this.states.a = true
this.animate("b")
else
btns.animate("a")

2 Comments

Ian McClure

your very last line should say this.animate("a") instead of bans.animate("a").

Also, your conditional is wrong. As it is written here it says: if this.states.a is assigned true do this.animate("a"). You are reassigning btns.states.a to true and if that assignment works, do the thing, the assignment works so the if will always return true. It should be:

if this.states.current.name is "a"
//do the things

Howard Einbender Jr

Cool! That logic definitely makes sense to me. I guess I'm still getting caught up with the "else" statement. "this.animate("a")" is targeting the button pressed but I want it to target all the other buttons that are not pressed. All buttons are within my "for loop" but dont seem to be effected. Example: btn1 clicked animate("b"), then btn2 clicked animate("a") while btn1 animates back to the default state.

Read the entire post on Facebook