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

What is Framer? Join the Community
Return to index
Andy Jakubowski
Posted Mar 05 - Read on Facebook

UPDATE: We fixed this, check out the solutions in the comments! :)

I want to achieve a Cover Flow effect with PageComponent. PageComponent should be the size of the screen, but each page should be smaller and centered. Everything works out of the box, but not for the first and last pages. The Paging Basics example from the Framer website illustrates this problem:
http://framerjs.com/examples/preview/#paging-basics.framer

Any idea on how this can be done?

11 Comments

Jonas Treub

if you make the pagecomponent the same size as its content they are centred for you: http://share.framerjs.com/44259ytj3ird/

Andy Jakubowski

Thanks! I forgot to mention that I want the user to still be able to scroll anywhere in the screen to advance the pages, though. So the PageComponent needs to be the size of the screen.

Scott Savarie

Think you can add contentInset, haven't checked though

Scott Savarie

It's like a section header / footer in a Table or Collection View

Andy Jakubowski

Here it is with an inset: http://share.framerjs.com/4n5lqztln1oc/

Andy Jakubowski

Perfect, that’s what I needed. I was not aware you could interact with clipped content. Thanks Jonas!

Scott Savarie

ah nice one

Kat Tp

I need the same!

Andy Jakubowski

Hey Kat! The example Jonas shared above works. You can also use the project I’ve been building based on that:
http://share.framerjs.com/r7pbjuwisls7/

It includes a page indicator, a page marker that updates as you scroll, and you can modify how pages change as they come in and out of focus. Hope that helps :)

Mike Hughes

wow....

Read the entire post on Facebook