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

What is Framer? Join the Community
Return to index
Katie Wu
Posted Jul 20 - Read on Facebook

I'm trying to implement behavior that follows the attached chart, where each rectangle is a screen. Right now I'm using 4 PageComponents:
1. RED screens (A, B, C)
2. GREEN screens (A.1, B.1, C.1)
3. BLUE screens (A.2, B.2, C.2)
4. All the A screens (A, A.1, A.2), which has pages that are the PageComponents: RED GREEN BLUE, mentioned above

But right now I can swipe from A.1 down to the B screen, and from B.1 back to A, which isn't what I want. How do I limit the swiping interaction to only the behavior shown in the chart?
Thanks!

5 Comments

Jonas Treub

You probably want to sync the yscrolloffset of the three vertical pagecomponents. If you share your prototype I'll take a look

Katie Wu

I'll message you the link - thank you so much! It's kind of a mess since it's a large project

Jonas Treub

The easiest way is to use a single pagecomponent and set all the layer origins using two loops. One for the x positions and one for y. Have a look at this example: http://share.framerjs.com/2cinn6ziiugc/

Koen Bok

Props for the schema!

Jonas Treub

Nevertheless I misunderstood. My bad. Here is the example which only allows for horizontal scrolling while at the top pages: http://share.framerjs.com/ceprdzksoz6q/

Read the entire post on Facebook