Design Unique Page Transitions in Framer XDesign Unique Page Transitions in Framer X

Learn how to get the most out of the Page tool with these three tutorial videos.


Callum Sweeney

November 16, 2018

There is so much that you can do with the new Page tool in Framer X. This roundup features three tutorial videos that highlight all the ways you can visually design page transitions using this new tool. You’ll start by getting to know its basic functionality and finish by understanding how to use the multi-connector and properties panel to design truly unique transitions, like a swipe-to-delete list.

Download your free trial to follow along

Get started with the Page tool

This first video will teach you how to set up an area within a frame so you can swipe between multiple cards. Once you have drawn a page area with the Page tool, you’ll see that you can use the multi-connector to add cards in your preferred order. All changes are immediately mirrored within the page area of your main frame. To view it in action, test it out using the Preview window (⌘P).

Customize using the properties panel

Next, learn how to change page order and scroll direction or adjust the width and height of pages using the properties panel. You can even modify the page layout by adjusting the gap and padding, as well as indicating which card you want to display first. Go ahead and customize the way pages swipe or scroll to suit your design. For the final touch, use a dropdown menu and select from 5 unique styles to add smooth transitions slide, cover flow or 3D cube effect.

Create advanced interactions

Swipeable cards are just the beginning of what you can achieve with the Page tool. In this video, we show you how to create a smooth swipe-to-delete list just by customizing the Page tool settings. You can apply this same technique to design more advanced interactions, such as scrollable datepickers and pull-to-refresh.

View examples of advanced interactions

Try it for yourself

Want to get started with Framer X? Download our 14-day free trial now. Or check out our Resources page for more video tutorials.

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.