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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Jun 11 - Read on Facebook

Hey folks. Here's a new PageComponent example with page indicators. You can set a custom amount of cards, and the indicators will update accordingly (and stay centered). It also every-so-slightly animates cards on page switches.

Included properties 'n methods:
- page.horizontalPageIndex()
- page.animationOptions
- page.on "change:currentPage"
- page.previousPage

Hope this is helpful! :-)
http://share.framerjs.com/x0li6cnk4pc4/

10 Comments

Jorn van Dijk

👊

Josef Richter

MODULE! :-)

Benjamin Den Boer

Also: Jonas Treub made an alternative version where the cards are scaled based on your dragging distance. :)

See: http://share.framerjs.com/xn25vhvix254/

Koen Bok

Oh, dat little overshoot when snapping.

James Morris

So crazy, I spent about 2 days solid getting this to work separately... Then realised that's what the PageComponent is actually for! Still, pretty proud I worked it out without it ;)

Pietro Schirano

I did the exact same thing yesterday ahah I am trying to get a work a tinder like interface, and the page component is really helpful

Koen Bok

Any hints to make it more discoverable?

Jakub Burkot

Hi Benjamin, I've had a few unsuccessful attempts of creating a page carousel where edges of the previous and next pages are visible. It'll work better in certain situations than pagination dots. Please see the attached image and thank you in advance!

Benjamin Den Boer

Hey Jakub Burkot - you can achieve this effect by switching to the second/next page by default. Then, you can apply some styling to the currentPage, and update them on page switches. I've made a little example for you to illustrate: http://share.framerjs.com/mppnj1bv2d1x/

Hope that helps. :-)

Jakub Burkot

Thank you very much for this, Benjamin!! It works so well! My apologies for delayed appreciation ; )

Read the entire post on Facebook