Recreate Flipboard’s iconic page-flipping motion in Framer.

“They’re flipped.”

I started using Flipboard since it was only available on the iPad. It’s one of the few apps that I would LOVE to use everyday. It has become a habit.

I love it because it’s …ELEGANT. The App Store is never short of creative news apps. However, few of them could come close to Flipboard. The iconic page-flipping effect and carefully crafted typography is a perfect binary metaphor to the real world magazine reading experience. It’s found the fragile balance between usability and aesthetics. One bit more would be redundant, one bit less would make it shallow.

I never stopped asking myself since the moment I knew it, “ How on earth did its creators come out with this idea? Did it strike like a flash or was it done through countless trials and errors ? Can I do it ? ” I don’t have answers to the first two questions. But, I do have the last one’s … with some help of Framer.

Here’s my take on it. When everything is done, all it takes to “Flip” is a number specifying the page count and the same amount of sequenced images placed in the project’s image folder. Simple ! But how ?

Let me explain my approach in detail:

Let’s imagine there will be 3 pages in the demo. As shown in the doodle above, the demo is constructed with 3 parts. The first part is the upper half of the first page (1U), followed by the lower half of the last page (3L). Everything else in-between belong to the third part. The third part is where the magic happens.

The “Flip” between Page 1 and Page 2 is driven by the rotation of Wrapper 1, which contains the lower half of Page 1 and upper half of Page 2 on the other side, facing the opposite direction. When Wrapper 1 rotates along the X-Axis from 0º to 180º, it creates the illusion of a flipping page. This is the core mechanics of my approach.

There’s one more challenge I need to tackle,

“ How to make the Wrappers rotate ? ”

Luckily, this could be achieved with one of Framer’s built-in component: the Page Component. Come on, really? Think twice. The timing of Flipboard’s page-turning effect is very similar to that of Framer’s Page Component. They’re both initiated with a swipe gesture. They both “Snap” when the swipe reaches a certain threshold. All I need is to find the “threshold” and a way to project the Page Component’s vertical movement to the “Wrappers’ rotation. Thus they should flip.

After several trials and errors, well mostly errors, I nailed it.

What these 2 lines of code do is that they chop the Page Component’s length into smaller sections divided by the number of the Wrappers. Each section is around the height of the screen. Then each section’s position is projected to the rotation of the corresponded Wrapper with the help of Framer’s “.modulate ” method. Simply put , when the pages move, the Wrappers rotate.

Having resolved these two major challenges, now I can relax and focus on the details.

First is the motion’s timing. When compared with Flipboard, I realized that it takes a longer swipe to flip the demo. After some investigation, I managed to match Flipboard’s timing by altering the Page Component’s speedY to 2.

Next is the Shade and Shadow. They’re what make the flipping motion more life-like. This is what Flipboard’s talented creators have noticed long before. They catered every detail. Good Job, LOL.

To give the layers shade and shadow, I created a few additional layers to play as shades and shadows. I use each Wrapper’s rotation to drive the opacity of its shade and shadow layer.

There’re a few other trivial odds that require polishing. I won’t mention them here. If you like you can download the demo and learn more about it. Before that, just relax and flip :)

Conclusion

Having recreated Flipboard’s iconic transition is like an old dream coming true. I spent two full weekends exploring, digging, redoing and tweaking every aspect of the demo to make it as close to Flipboard as possible. It’s an amazingly tough journey, while well worths every penny of my effort.

There’s one more thing to mention. We found an opportunity to put this demo into practical use. With some help of our developers we managed to create a flipping invitation letter for an annual clients gathering event. “They’re flipped.”

It’s so cool.

I’m launching my own portfolio achieve. This article is actually part of it. Click the icon below to take a look. I think it’s cool :) Oh, do note it’s still under development and most links are still unavailable. Besides, it’s still partly in Mandarin. Come on, Rome was not built in a day. Just give it a try.

Have fun🖖