January 21, 2022
In this article we highlight how Pageflow Next allows you to immerse readers into compelling scroll experiences more than ever by building scroll animations. And this without knowing even a single line of code.
All you need is a good idea for story elements that unfold through different phases. You're well advised to use eye-popping source material for impressive results.
Ideally, you're proficient in graphics programs yourself or have a designer on board who understands your story vision and visually translates it for you.
Use this groundwork to build various stages of images, graphics or data visualizations.
By merging subsequent phase images in certain transitions in a clever way Pageflow Next wil assist you in bringing your web story into an appealing and unique appearance in the sense of a scrollable flipbook.
This clip shows a scroll animation with 6 phase images
This way, the visual impact of your articles, longreads, or digital reports can be enhanced in a more engaging way than has ever been possible with the storytelling features provided by Pageflow so far.
The following features help you make your web story equally accessible on desktops, tablets, and smartphones
We believe that subliminal changes in sensory perception of web reports have the power to put us in a different state of mind. A state in which consciousness rises and further input can trigger emotions. In terms of digital storytelling these states can be provoked by visual language, sound, interaction and words.
And we believe that storytelling should always aim to use these instruments to unleash the recipient's full attention.
Therefore Pageflow provides you with all the necessary multimedia tools to reach your audience in the best possible way.
The following four sections are using a background image variation in white/black/yellow.
The transition beeing used between these sections is called Scrolling with static background. This scroll effect can be used, for example, to fix objects at one position and expose a second background from bottom to top while scrolling.
To make the upcoming sections audible, as well, please activate the sound:
Sound can be muted again using the speaker icon in the navigation.
To explain how the next scoll effect works, please just look at this before-after view:
The white card that we've applied here fulfills two tasks: First of all we'd like to use this opportunity to introduce a new way to emphasize text by contrasting it with a box in general. But the more important:
By using a card you can always guarantee a perfect contrast for readability on smartphones.
Pro Tip #1 - Scrollable Animations
Just scroll the following example to see how an empty glass will become a full glass of tasty red wine. In order to give the animation a suitable environment, we've placed the glass on top of a barrel.
Pro Tip #2 - Scrollable Data Elements
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.
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 to get to the desktop view.
Pro Tip #3 - Scroll Exploration
Since Pageflow is also used as digital teaching tool, we'd like to show how easy dry topics can be turned into a great learning experience for a virtual lesson.
In this example we've used an exploration image of the earth from the surrounding atmosphere to the inner core and created single images of the different layers.