Pro Tipp #2 - Scrollable Phases
HOW TO USE Phase Images for Scrollable Data Stories
In this article we explain how Pageflow Next can be used to build scrollable data visualizations in the sense of a flipbook. To achieve this all we need is a series of phase images and combine them with a suitable transition effect. For this examples we have used excerpts from an Adobe Stock image.
A particular challenge in displaying charts and other data visualizations is cross-platform functionality. Keep in mind that icons and typography must be readable and that all parts of your graphics have to match the viewport.
Desktop Version in Final State
In order to fit the viewport of smartphones we have created a version in portrait mode in the
Smartphone Version in Final State
If you are reading this article on a large screen in landscape mode, narrow the browser window to see the smartphone version. On the other hand, if you're accessing it on a smartphone, rotate your device 90° to get to the desktop view.
How it was made
Here you can see the sequence of phase images that were used for the Scroll animation. One 16:9 and one 9:16 image was used per section.
If you're watching this on a wide screen, you'll notice the Sticky Elements. The width of the desktop screen is used to display content in two columns next to each other. As the name suggests, they remain in their position until they are scrolled out by another image or the next section.