In December 2017 Readymag launched Faster Vertical Viewer, which enables smoother viewing experience for projects with fixed widgets and heavy animations. In this article Readymag Product Designer Eugene Petrov describes how we did it and what we achieved.
It all was easy first
In 2013 Readymag started out with a single Horizontal Viewer. A project utilizing this type of viewer presents a set of vertical pages between which the reader switches using navigation arrows on the left and on the right of the page. In a horizontal viewer project, each single page could also be scrolled vertically from top to bottom if it doesn’t fit the screen.
Then we introduced Fixed Widgets — they stick to a certain position in the browser window and do not move when the page is being scrolled. But when you move to another page, fixed widgets get out of view together with the previous page where they belong. For two-dimensional scrolling, it was enough to use widely supported ‘position: fixed’ CSS property.
Beyond the Horizontal Viewer
Problems arose when we started stacking pages on top of each other to present them in new Vertical Viewer.
In this case, Fixed Widgets need to stay on screen while their page is being scrolled. But, they should get out of view when a new page appears — not from the side like in horizontal scroll projects, but from the bottom of the screen. The ‘position: fixed’ property couldn’t solve that task: elements are no longer unconditionally fixed along the height of the page (vertical axis) but have to check if there’s a new page coming and change their state accordingly from being fixed to being static.
‘Position: sticky’ comes to light
Everything changed in March 2017 when all major desktop and mobile browsers finally added support for ‘position:sticky’ CSS property. Chrome was the last one to introduce it in version 61 on September 5, 2017. Since then the task to remove fixed elements from view along with their container became trivial.
Faster Vertical Viewer: the principal changes
We saw this challenge as an opportunity to fundamentally rethink the implementation of the Viewer. The result is our new Faster Scroll Viewer — when switched on, the browser interprets the sequence of pages of which the project consists as a naturally tall HTML page body (as if pages follow the ‘flow’ in which all HTML elements appear on a page). This way our project with all its complicated logic looks as a conventional long web page like any other website.
This update enabled faster and smoother viewing performance, especially on pages with animated and fixed widgets.
Yet, there are a couple of minor cons. Firstly, when switched on, the Faster Scroll does not support the Slide-in transition. We left this option in the settings, but have to warn you that it uses the old implementation of the Viewer with all its drawbacks.
Secondly, ‘on scroll’ animated widgets — that move as visitors scroll — could lag in some browsers. That’s due to the reason we’ve described earlier: surprisingly, browsers cannot fire the ‘onscroll’ event simultaneously with the scroll. That essentially means that we can’t run the script that moves animates widgets on every scroll movement. It especially hurts when you are using ‘on scroll’ animations to lock a widget on a screen while the rest of the content is being scrolled. Luckily, there is a workaround: make your animated elements fixed. In this case, everything will look perfect.
Readymag has always strived to give the most advanced web technology in the hands of designers. You might get a sense it’s a tough approach (and it is indeed!) but creative freedom will always be our #1 priority.