Protopie What Is Paging

Hello everyone! Welcome back to another installment of Looping Animations with ProtoPie. In our previous article, we explored the basics of Looping Animations. Today, we’re going to take it a step further and teach you how to create an Infinite Paging Scroll. But before we dive in, let’s understand what exactly an Infinite Paging Scroll is.

What is an Infinite Paging Scroll?

An Infinite Paging Scroll is a scrolling feature that allows you to endlessly slide through pages in two opposite directions. It’s like a never-ending loop of content. Imagine being able to scroll through pages continuously without any restrictions. That’s the magic of an Infinite Paging Scroll.

What’s the logic behind it?

To create an Infinite Paging Scroll, we’ll be using a feature called paging containers in ProtoPie. If you’re new to paging containers, don’t worry. We’ve got you covered. Check out this helpful Scroll & Paging tutorial to learn how to create paging containers.

Assuming you’re already familiar with paging containers, let’s jump right in.

  1. The first step is to duplicate the first page and place it behind the third page. This ensures that when you slide the third page to the left, there’s always a page following behind. Let’s call this duplicated page “Page 1′”.

Left, Wrong effect. Right, Right effect

  1. When “Page 1′” scrolls to the center of the screen, all four pages should scroll back to their original positions, so that “Page 1” is back on the screen. This gives the illusion that there’s no fourth page. Users won’t be able to distinguish between “Page 1” and “Page 1′” because they are identical.

  2. Now let’s learn how to scroll the pages from right to left. We’ll start by duplicating the third page and placing it on the left side of the first page. This ensures that there’s a page on the left side of “Page 1”. Let’s call this duplicated page “Page 3′”. Let all five pages scroll from “Page 1”.

Left, Wrong effect. Right, Right effect

  1. Similar to step 2, when “Page 3′” moves to the center of the screen, we need to scroll the pages back to “Page 3” immediately. This allows us to continue sliding from right to left seamlessly.

Now that we’ve understood the logic behind an Infinite Paging Scroll, let’s see how we can create this interaction using ProtoPie.

How to make this interaction with ProtoPie?

To achieve the Infinite Paging Scroll effect, we’ll be using the ‘Range’ trigger and ‘Scroll’ response.

  1. When “Page 1′” scrolls to the center of the screen, the scroll offset is 750. We can set the ‘Range’ trigger to activate when the scroll offset is between 749.5 and 750.5. Then, we’ll use the ‘Scroll’ response to scroll the page to 187.5 (which is the width of each page).

We need to use the 'Range' trigger and 'Scroll' response

  1. Similarly, when “Page 3′” scrolls to the center of the screen, the scroll offset is 0. We can set the ‘Range’ trigger to activate when the scroll offset is between -1 and 1. Then, we’ll use the ‘Scroll’ response to scroll the page to 562.5 (which is the width of each page).

Setting scroll offset and scroll response

Note: You might be wondering why we set a range between ±0.5 for one case and ±1 for the other. Well, as it turns out, you can set both ranges with the same number, as long as the number is not too big. The effects will be the same.

Creating an Infinite Paging Scroll may seem a bit challenging at first, but with practice, you’ll master it. For a closer look at the process, you can download the Pie file we’ve prepared.

If you have any other topics or tips you’d like us to cover, please feel free to let us know. We’re here to help you unleash the full potential of ProtoPie!