Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides

Introducing the Page Tool

Framer X’s powerful new interactive tool lets you design tons of interactions, from simple swipe gestures to 3D numeric pickers.

Sarah Lim

SL

by Sarah Lim

Sarah Lim

SL

Twitter

Sarah Lim

Content Strategist at Framer.

TwitterFacebookLinkedIn

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.

Share this article

TwitterFacebookLinkedIn

Bring your best ideas to life

Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.

Visual

Editorial

How to Code a Website in 2021: A Comprehensive Guide

November 2, 2021

Visual

Guides

What is Mobile-First Design, and How Do You Implement It?

November 2, 2021

Visual

Guides

How to Become a Web Designer in 2021

October 4, 2021

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement