Introducing the Page Tool

We’re excited to introduce a brand new interactive tool to the latest version of Framer X: the Page tool. With the Page tool you can go beyond simple vertical and horizontal gesture-based transitions to create everything from list interactions and date pickers to 3D card transitions and momentum-based flicking.

How it works

It’s simple. Just select Page from the interactive tools panel and then draw a swipeable area on the canvas. Drag the multi-connector to all the frames you’d like to page between, then open the Preview window (⌘P) to test the look and feel of your new page component.

Customize everything

Tailor your page component in the robust new properties panel, where you can update elements like swiping direction, alignment, padding, and momentum. You can even choose from five effects that will give your page transitions extra flair. To make it easy to manage lots of pages, we included a content section that lets you preview, rearrange, add, and remove pages all in one place.

Next-level interactions

As our most flexible interactive tool to date, the high-fidelity prototyping possibilities are endless. Check out these examples and then take the tool for a spin in Framer X.

3D Transitions

Choose one of the many effects that come with our Page tool to create stunning custom transitions that take a simple page swipe to another dimension.

Download this example

Momentum

Turn momentum on in the properties panel to enable momentum-based flicking, which allows you to scroll through lists of items with a single swipe like you see in this date picker example below.

Download this example

Actions

The Page tool allows you to do much more than swipe between pages. Use it to create advanced interactions in just a few clicks.

Download this example

Get started

Find out what else we’ve included in the latest version of Framer X on our Updates page or read our updated Docs to learn more about the Page tool. Ready to start tinkering? Download our latest Examples.