Addison Schultz
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 react-flip-page
.
Page
by default.Page Properties
default
by default.none
by default when enabled.shrink
by default when enabled.10
by default.hidden
by default.#000000
by default.false
by default.corners
by default.on
by default.show
by default.#FFF
by default. Option doesn’t work when you upload your own iconnull
by default.null
by default.Flip Properties
vertical
by default.true
returns a more “bookish” effect. Set to false
by default.200
by default.10
by default.45
by default.0.4
by default.130
by default.#fff
by default.false
by default.false
by default.false
by default.false
by default.true
by default.false
by default.true
by default.0
by default.Version | Description |
---|---|
v1.0.0 | Initial Publish |
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.12.0 | Updated Readme |
v1.13.0 | Add support for react-flip-page |
v1.14.0 | Add custom transition fade |
v1.15.0 | Add support for custom background-color on Page |
v1.16.0 | Minor UX updates |
v1.17.0 | Add custom transition lineup |
v1.18.0 | Fix clipped borderRadius on FlipPage |
v1.19.0 | Optimize for Web/Desktop, fix broken null states |
v1.20.0 | Bump react-flip-page to ^1.6.2 to fix clipped edges |
*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 to @derlukasg for also contributing to the custom fade transition!
*Thanks to @steveruizok for also contributing to the custom lineup transition!
Feel free to reach out to me @addisonschultz with any questions, or feel free to submit a pull request.