Design Unique Page Transitions in Framer X

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

callum

Callum Sweeney

November 16, 2018

banner

T here 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.

Want more design articles?

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

5 Ways Facebook Scales Their Design System

Read more ›

Design Systems in Framer X

Read more ›

Creating Code Components

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free › Learn about teams ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.