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

What is Framer? Join the Community
Return to index
Michael Bing
Posted May 07 - Read on Facebook

Hi all

I have been trying to make a slide view, but it does not really work out for me. Here is what i am trying to achieve.

I have a center view (iPad), around it, i want to slide up, down, right and left. I am thinking this would be possible by combining the scroll and page component, but i am not sure how to combine them. Any ideas on this?

Cheers

9 Comments

Benjamin Den Boer

Hey Michael - you can definitely combine ScrollComponents with PageComponents. The Medium app prototype serves as a nice example of this: http://framerjs.com/examples/preview/#medium-app.framer - in your case, though, a few things to keep in mind would be:

- Pages can only be added to the bottom and right side. To add pages to the top/left, simply add them to the right/bottom first and snap to any of your desired page instantly.
- If you simply want pages in every single direction, there's no need to use the ScrollComponent, you can do this using the PageComponent only.

The new Learn pages on Scrolling & Paging may be helpful to you as well. http://framerjs.com/learn/basics/pages/

Ken Miura

if you are attempting to do something like a page slide, except for vertical directions as well as horizontal, that's what I'm doing too. I want a center view and 4 surrounding screen views placed outside of the screen, to which you can flick to (but there's no "in-between state" in terms of the view so the motion always snaps to a center point of each of the 5 panels (Home+4) I'm attempting to do this pretty much manually, but if there's a way to do this with existing components, that would be great to know.

Benjamin Den Boer

Alrighty Michael Bing, Ken Miura give me a minute and I'll create an example for you guys.

Benjamin Den Boer

Okay here is what I meant with using the PageComponent to add pages to the top/left/bottom/right while snapping to the one in the middle. :-) Hope this helps.

Watch video: http://cl.ly/aqkT
Download: http://share.framerjs.com/vst5d7yab9tw/

Ken Miura

wow, thanks, Benjamin Den Boer !!! Very helpful

Michael Bing

Holy banana Benjamin Den Boer this is precisely what i was talking about. I am hereby blessing you with eternal talewind on bicycle paths :) Thank you so much... dang Framer is awesome!.

Michael Bing

Benjamin Den Boer I have stumbles on a "small" issue. Is it possible to move the top and bottom mid layers to the right and left side when i swipe?. Wham i am trying to achieve here is this:

allCards[1].style = {"backgroundColor" : "white"}
allCards[3].style = {"backgroundColor" : "blue"}
allCards[4].style = {"backgroundColor" : "grey"}
allCards[5].style = {"backgroundColor" : "gold"}
allCards[7].style = {"backgroundColor" : "red"}

These cards are my actual navigation. But when i scroll up to card [3] (top). If i swipe to the left or right, i would still like to see card [3]. The same goes for card [5] (bottom), when i swipe down to, i would like to see card [5 to the right and left cards too.

Is this possible?

Cheers]

Nick Bewley

Hey Michael Bing want to help but unsure about what you are trying to do. Are you trying to change the backgroundColor of different cards on swipe?

Michael Bing

Hi Nick Bewley. Sry for late reply, but i figured out a solution where i switch the card positions, depending how you access top and bottom. But cheers for wanting to help out :)

Read the entire post on Facebook