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

What is Framer? Join the Community
Return to index
David Townsend
Posted Dec 17 - Read on Facebook

Hi guys extreme noob with a complex question. I know there is a YouTube video talking about how to have a framer project with multi-screen flow but it is hard to see the whole code.

By any chance does anybody have an example I could look at or point me to a tutorial I could look over?

Thank you and I am grateful for this group.

4 Comments

Trevor Coleman

The way I do it is:

1. Use sketch to create screens - each screen on a different art board. (Screen1Artboard, Screen2Artboard, etc)

2. Import the sketch file and assign each artboard to a variable.

screen1 = sketch_layers.Screen1Artboard
screen2 = sketch_layers.Screen2Artboard

3. Set the screen I want to visible, and the other one to invisible.

screen1.visible = true
screen2.visible = false

4. To switch just change the visible layer:

changeScreen = () ->
screen1.visible = false
screen2.visible = true

4. What I generally do is put all that into a function loadScreen() that takes a screen name as an argument and loads the right screen and hides the rest. If you want to get fancy, you can add fades, swipes and other animation just as you would any other later.

changeScreenButton.on Events.Click, ->
screen2.x = -500
screen2.animate
properties:
x: 0

Etc.

Trevor Coleman

On my phone but I can post an example when I get to work.

David Townsend

Thank you guys for the help

Read the entire post on Facebook