This website uses features that your browser doesn't support. Please upgrade to a recent version of your browser.

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.

Credits:
AdobeStock_357556494 AdobeStock_230383727 AdobeStock_322110547 AdobeStock_441592699 AdobeStock_364815987

Media
  • Codevise Solutions



January 21, 2022

How Web Stories Can Benefit From Scroll Animations



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.



0:00/0:00

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.

Gurantee Readablity Across Platforms

The following features help you make your web story equally accessible on desktops, tablets, and smartphones

  • Use separate mobile images in 9:16 ratio to optimize your motif for smartphones, if essential parts of your desktop version don't fit in portrait mode.
  • Choose a motif area to bring your chart, product or item into scene and determine when text starts to appear in front of your motif.
  • Apply dynamic shadow or a card to ground your text and intensify the impact of contrast when text comes in.
  • Utilize the editor's mobile preview to always proof a perfect match in the vertical view on smartphones.

Tran­sitionS CAN changE perception

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.



Make it Tangible:

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.





Black and Yellow

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.

EXAMPLES







Pro Tip #1 - Scrollable Animations

USING BEFORE/AFTER IMAGES to simulate the filling of a glass



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.

Scroll the iframe by yourself:





Read and share the example here:







Pro Tip #2 - Scrollable Data Elements

USIng Phase Images FOR Scrollable Data Stories

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.





Read and share the full example here:







Pro Tip #3 - Scroll Exploration

Using phase Images for educational Content

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.





Read and share the full example here: