Framer Cheat Sheets: States
This cheat sheet is meant for beginners and as well as a reference for more advanced users. States allow you to flip between different layer states, which can be useful for toggles, buttons and even animations.
I wrote this series of Framer cheat sheets for people who, like me are not so great at writing code (but pretty pretty darn good at copy & pasting). We will look at the very basics, simple properties and commonly used patterns. To see more, go to The School of Do.
In this Framer JS Cheat sheet, we will look at the following:
- What is a state
- How to give a layer states
- Adding, deleting and animation options
- Switching between states
- Common examples
1. What is a state
States are, quite literally, different states of a layer. Think of a check box, it has two states, namely “ticked” and “unticked”. A toggle also has two states “on” and “off”.
In framer, we can switch between these states using different events.
2. How to give a layer states
1. First, you have to create a layer
layer = new Layer2. Next you can give it a state and set it to that state
When you create a layer, it initially has a default state. So, you need to create another state, and then make the layer start at that state.
You can style your states in lots of different ways. Find out more about layer styling here.
layer = new Layerlayer.states =
one:
backgroundColor: "#00A2A7"
html: "State one"layer.states.switchInstant "one"
3. Create more states
Here you can create as many states as you want. You will notice that even though you add more states, the layer stays the same.
layer = new Layerlayer.states =
one:
backgroundColor: "#00A2A7"
html: "State one"
two:
backgroundColor: "#FF9661"
html: "State two"layer.states.switchInstant "one"
4. Switch between states
To switch between states, you need to create an event or a listener. In most cases, you will click on the layer or another button.
layer = new Layerlayer.states =
active:
backgroundColor: "#00A2A7"
inactive:
backgroundColor: "#999"layer.onClick ->
layer.stateCycle "active", "inactive"
3. Adding, deleting and animation options
1. Adding one state
Adding multiple states in one go is easier than just adding one state at a time.
layer = new Layerlayer.states.stateA =
backgroundColor: "#00aeff"layer.states.stateB =
backgroundColor: "#000"
BUT, when you add one at a time you can create a specific animation when transitioning to that particular state.
layer = new Layerlayer.states.stateA =
backgroundColor: "#00aeff"
animationOptions:
curve: "spring"layer.states.stateB =
backgroundColor: "#000"layer.animate ("stateA")
2. Adding multiple states
Adding multiple states is the usual method for adding states. Keep in mind — that, by default you have a default state. So you always have one more state than those you declare.
layer = new Layerlayer.states =
stateA:
backgroundColor: "#00aeff"
stateB:
backgroundColor: "#999999"
Delete a state
When you create a layer, it creates a default state. This can be rather bothersome, so rather delete it. Or delete another state if you want.
layer = new Layerdelete layer.states.default
Add and remove the hashtag below to see how a default state can get in the way.
layer = new Layerlayer.states =
active:
backgroundColor: "#00aeff"
inactive:
backgroundColor:"#000000"
#delete layer.states.defaultlayer.onClick ->
layer.stateCycle()
Animating Options
Animation options allows you to change how a layer will always animate between states.
layer = new Layerlayer.states.stateTwo =
x: 400layer.states.animationOptions =
curve: Springlayer.onClick ->
layer.states.switch "stateTwo"
5. Switching between states
There are a couple of ways to switch between states, each have their own use depending on what you are trying to do.
.stateCycle “stateA”, “stateB”
.stateCycleallows you to cycle between selected states or all states. In the below example, we cycle between two states, even though we start on a default.
#Creating the container for the toggle (white line)
toggle_cont = new Layer
width: 150
height: 80
borderRadius: 60
borderColor: "#000"
borderWidth: 2#Creating the toggle
toggle = new Layer
size: toggle_cont.height - 10
parent: toggle_cont
backgroundColor: "#000"
y: 3
x: 4
borderRadius: toggle_cont.height
html: "default"#Creating the toggle's font style
toggle.style =
fontSize: "14px"
lineHeight: "65px"
textAlign : "center"#Creating the toggle's states
toggle.states =
stateA:
html: "stateA"
x: 4
stateB:
x: toggle_cont.width - (toggle_cont.height - 3)
html: "stateB"#Making it so that when you click on the toggle, it changes state
toggle_cont.onClick ->
toggle.stateCycle "stateB", "stateA"
.stateCycle()
While you can choose exactly what states you want to cycle between, you can also cycle through them all. In the below example, you can see that it cycles through both created states as well as the default.
#Creating the container for the toggle (white line)
toggle_cont = new Layer
width: 150
height: 80
borderRadius: 60
borderColor: "#000"
borderWidth: 2#Creating the toggle
toggle = new Layer
size: toggle_cont.height - 10
parent: toggle_cont
backgroundColor: "#000"
y: 3
x: 4
borderRadius: toggle_cont.height
html: "default"#Creating the toggle's font style
toggle.style =
fontSize: "14px"
lineHeight: "65px"
textAlign : "center"#Creating the toggle's states
toggle.states =
stateA:
html: "stateA"
x: 4
stateB:
x: toggle_cont.width - (toggle_cont.height - 3)
html: "stateB"#Making it so that when you click on the toggle, it changes state
toggle_cont.onClick ->
toggle.stateCycle()
states.switch
.states.switch is used when you don’t want a trigger to toggle between states. You can click the trigger as many times as you want but it will only ever activate one state.
#created layer
bttn = new Layer
width: 200
height: 60
y: Align.center
x: Align.center
borderRadius: 5
html: "default"
shadowY: 5
shadowBlur: 5
backgroundColor: "#00aeff"#creating states
bttn.states =
Pressed_State:
html: "Pressed State"
opacity: 0.8
shadowY: 0
shadowBlur: 0
backgroundColor: "#999"#creating trigger to change state
bttn.onClick ->
bttn.states.switch "Pressed_State"
states.switchInstant
.states.switchInstant works just like switch — except (surprise surprise), it is instant. So basically, there is no transition animation.
#created layer
bttn = new Layer
width: 200
height: 60
y: Align.center
x: Align.center
borderRadius: 5
html: "default"
shadowY: 5
shadowBlur: 5
backgroundColor: "#00aeff"#creating states
bttn.states =
Pressed_State:
html: "Pressed State"
opacity: 0.8
shadowY: 0
shadowBlur: 0
backgroundColor: "#999" #creating trigger to change state
bttn.onClick ->
bttn.states.switchInstant "Pressed_State"
.animate (“stateA”)
Animate allows you to animate your layer to a certain state. You could also use .states.switch
#creating layer
bttn = new Layer
width: 200
height: 60
y: Align.center
borderRadius: 5
html: "default"#creating states
bttn.states.Pressed_State =
html: "Pressed State"
x: 300
animationOptions:
curve: "spring"#creating trigger
bttn.onClick ->
bttn.animate("Pressed_State")
5. Common examples
Toggle
iOs is very fond of using toggles. Try this simple example to change the background colour.
Checkboxes
In almost every form you will find a checkbox. Notice that the tick starts out, not just invisible, but also small. This creates a zooming in and out effect.
Multi state button
Multi state buttons are all the rage at the moment. In this example, we switch between, a menu icon, close icon and a forward arrow.
Expand options
Usually used for expanding social icons, this example can add a bit of flair to your design.
Cycle between multiple states
In the unlikely event that you need to change a layer’s state with other buttons, you can try this example.
Hopefully this cheat sheet helped you, and if it didn’t or you want to learn more about something else, please leave a comment bellow, and I will update :)
