Design Unique Page Transitions in Framer X
Learn how to get the most out of the Page tool with these three tutorial videos.
November 16, 2018
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.
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.