Is there an easy way to get the PageComponent to align the first page to the left and the last page to the right? Similar to how Facebooks mobile carousels work.
I think that's how PageComponent works by default... http://share.framerjs.com/n2t5c83csokl/
Oh, that's correct. My bad :) Been tinkering with too many tools lately. Do you know if there is any parameter that can disable this so that the first and last page centers in the same fashion as the pages inbetween does?
Try playing around with page.originX.
The only way that I know of is by adding some empty space to the first and last page. Example: http://share.framerjs.com/soveayerx5iv/
Maybe what Darin Dimitrov proposes also could work (changing originX while scrolling...) but I haven't tried it
You can also play with contentInset although some side effect on first and last card positioning
Thanks guys! Will look into it.
I believe PageComponent does this behavior right out of the box. I usually need to hack my PSD file to achieve different results. If you define your pageComponent to the size of the screen but your pages themselves are smaller.
I guess when you define the x and y of each page in the page component, try to allow overlap for each page. Might need to adjust the graphic file a little.
Ola Laurin did you find a solution? Yesterday I did this (https://www.dropbox.com/s/9354rbkswg7l4h7/duolingoFramer.mov?dl=0) and run into the same problem. Tried with contentInset without luck. At the end I had to work on single page.x and adding a fourth invisible card to have a proper alignment (side effect: you can scroll beyond page 3). Benjamin Den Boer any help?
Giovanni Caruso Nope, never managed to get it working. Something like page.alignToMargin = false would be a nice add on for PageComponent.
Here is the code of my example: http://share.framerjs.com/5z06ok7u33j7/
Koen Bok, Jordan Robert Dobson
Kind of surprised there isn't a built in option to center the first and last cards/pages within the component to maintain consistent positioning. Regardless of whether the default behavior aligns first and last cards to the edges of the page component, I would love to see an option (or even simple workaround?) to position cards consistently within the component.
It's fairly easy to do:http://share.framerjs.com/j75mus2hanbq/
Thanks Jonas - Unless I'm missing something (possible), I don't think this addresses what I'm trying to accomplish. I want the page horizontally centered within the device frame, regardless of whether it is the first, last, or any in between. The default behavior of the page component seems to center elements how I want *unless* they are the first or last elements, in which case it keeps them aligned with the page component edges. A manual x offset would work for the first card, but not the last, and it still feels hacky. Does that make sense? Any ideas to adjust for this?
like this: http://share.framerjs.com/hyrf5bgt2m1v/ ?
I made the pagecomponent the same size as the pages so the pages are always horizontally aligned
Ah man...Jonas beat me to it http://share.framerjs.com/zs8eejy19klt/
Aha! Thanks Jonas! I don't care that you were second, Arron – you guys are both awesome. I had tried something similar, but didn't know I could turn off clipping.
Learning slowly, but surely, and loving this helpful community...