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

What is Framer? Join the Community
Return to index
Ola Laurin
Posted Nov 03 - Read on Facebook

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.

19 Comments

Javier Chávarri

I think that's how PageComponent works by default... http://share.framerjs.com/n2t5c83csokl/

Ola Laurin

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?

Darin Dimitrov

Try playing around with page.originX.

Javier Chávarri

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

Giovanni Caruso

You can also play with contentInset although some side effect on first and last card positioning

Ola Laurin

Thanks guys! Will look into it.

Daniel Lee

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.

Sherwin Dai

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.

Giovanni Caruso

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?

Ola Laurin

Giovanni Caruso Nope, never managed to get it working. Something like page.alignToMargin = false would be a nice add on for PageComponent.

Giovanni Caruso

Here is the code of my example: http://share.framerjs.com/5z06ok7u33j7/

Giovanni Caruso

Koen Bok, Jordan Robert Dobson

Jeff French

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.

Jonas Treub
Jeff French

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?

Jonas Treub
Jonas Treub

I made the pagecomponent the same size as the pages so the pages are always horizontally aligned

Arron J Hunt

Ah man...Jonas beat me to it http://share.framerjs.com/zs8eejy19klt/

Jeff French

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...

Read the entire post on Facebook