Cube Effect

Cube Effect

There are many interesting ways to depict pagination for images or other visual elements on websites or mobile apps. One dynamic method is the cube effect -- in which images or items are organized into swipeable cards that take on the feeling of a rotating cube revealing different items on each of its sides.

It’s a neat, effective, economical way to inform users when they’re swiping from one item to the next, while also letting them know there’s only a set number of items to scroll through. Sure, numbered pages or a series of dots works just fine, but the 3D rotation of a cube is intuitive to users who don’t know much about pagination in general. That’s good, solid UX/UI design.

Utilizing a cube effect in Framer

If you’ve got a set of pages you’d like to transition between based on user interaction, you can use the Page tool to construct built-in paging functionality between those items. Just select your main page, and create an order linking that page to several others. Then, from the Page menu on the sidebar, select Cube from the Effect dropdown menu.

From there, your items will appear as though they flick from one side of a cube to another as the user scrolls through them.

You can also customize the cube effect in Framer, including changing the direction of the pagination, the width/height of the cube, the level of padding between each page, whether you want momentum, drag, or a wheel effect, and more.

However you want to customize your cube pagination animation, Framer has the means to help you realize your vision for your app or website. Pick from a number of styles and components, from opacity to fill color, borders, shadows, and more.