A single code component that allows you to connect to content, and click through without code overrides.
Drag onto the canvas, and connect to however many frames you would like!
There are two types of Pagination encapsuled in this component:
Page - Extends the Page component in Framer X.
Flip - Includes the FlipPage component from
- Page Type - Type of Pagination. Set to
- Transition — Default or Custom Page Transition. Set to
- Effect — Page Effect on Change. Set to
noneby default when enabled.
- Custom Effect — Custom Page Effect on Change. Set to
shrinkby default when enabled.
- Gap — Sets the gap between the connected content. Set to
- Overflow — If the connected content can be seen outside of the component itself. Set to
- Background Color — The background color that shows when a gap is set on the Page component. Set to
- Draggable — If the Page can be changed by dragging. Set to
- Tap Area — Where the tappable area is located. Toggle between Corners and Sides. Set to
- Carousel — Whether or not the Page will jump to the beginning when it reaches the end or vice versa. Set to
- Icons — Whether or not the icons will show. Set to
- Icon Color — Arrow color. Set to
#FFFby default. Option doesn't work when you upload your own icon
- Left Icon — Left Icon. Set to
- Right Icon — Right Icon. Set to
- Orientation - Direction the Flip Page will turn. Set to
- Uncut Pages - Whether or not the content will overflow the Flip Page.
truereturns a more "bookish" effect. Set to
- Animation Duration - Duration in ms for the flip animation. Set to
- Treshold - Distance in px to swipe before the gesture is activated. Set to
- Max Angle - Angle of the page when there's nothing to display before/after. Set to
- Mask Opacity - Opacity of the masks that covers the underneath content. Set to
- Perspective - Perspective value of the page fold effect. The bigger, the less noticeable. Set to
- Background - Background of the pages. Set to
- Direction Hint - Indicates if the component must hint the user on how it works. Set to
- Swipe Hint - Indicates if the component must hint the user on how it works. Set to
- Touch Hint - Indicates if the component must hint the user on how it works. Set to
- Flip on Touch - Whether or not you can touch to change pages. Set to
- Loop - If the carousel will restart when it reaches the end. Set to
- Disable Swipe - Whether or not swipe gestures are recognized. Set to
- Responsive - If the connected content will be able to be seen in the Pagination Component. Connected content must be at least the same dimensions as the Pagination Component. Set to
- Start Page - Index for the pages to start on. Set to
|v1.1.0||Cleaned up code|
|v1.2.0||Added arrow icons with changeable color|
|v1.3.0||Added ability to change page effect|
|v1.4.0||Added option to change left and right icons with user uploaded svg files|
|v1.5.0||Updated Readme and images|
|v1.6.0||Cleaned up code|
|v1.7.0||Fixed missing arrow assets|
|v1.8.0||This time actually fixed arrow assets|
|v1.9.0||Hotfix to work in Framer X beta|
|v1.10.0||Added functionality to edit props, and fixed to work with new API|
|v1.11.0||Added tons of new props, and added some custom transitions.|
|v1.13.0||Add support for
|v1.14.0||Add custom transition
|v1.15.0||Add support for custom
*This component was a React Class component before Framer X21. Current version is a refactored functional component, but the original code for the now depreciated Class Pagination Component can still be found in this package when looking at the code if you'd like to explore the differences between Class and Functional React components.
*Thanks also to @derlukasg for also contributing to the custom fade transition!