Continued work on scroll-driven content

I’ve been working for a while on different approaches to presenting information at SciencePrimer.com. This is why I created the single page template and other tools I discussed here last year. It is also the impetus behind the scrolling content I’ve posted over the past few months. 

The two recent scroll-driven posted (log-scale and ATP introduction) took a long time to create because after experimenting with some animation frameworks and scrolling libraries I ended up writing the scroll responsive system myself. The challenge involved in making these two illustrations motivated me to develop a template to make it easier for me get started on new content. The result is V02 of the scrolling template. It is still webpack based and should play well with any CMS that allows javascript to run. 

In the scroll driven style, visual content on the screen reacts directly to readers scrolling actions. There are a variety of examples of others using this style - from media-rich experiences like the 2012 New York Time article about the Avalanche at Tunnel Creek - to more targeted instructional type projects like R2D3’s visual introduction to machine learning. It is the latter type of straightforward scroll to drive animation that I am focused on at SciencePrimer. 

One big challenge with scroll-driven content is that much of it does not perform well on mobile devices with smaller screen sizes. This includes the NYtimes and R2D3 examples. I want SciencePrimer.com to be usable on mobile devices so my template scales to fit multiple screen sizes  - computers, tablets, and phones - in both landscape and portrait modes. I’ve also worked to make sure the animations perform reasonably well on mobile devices where complex animations can tax the processor. 

To make things easier on mobile processors, I switched from SVG to HTML5 canvas based animations. These canvas elements are much more processor friendly and allow animated elements to move smoothly with the scroll.

I also changed how text is added. Earlier scroll-driven posts on SciencePrimer.com had the all of the scrolling text injected by javascript after the page had loaded. This made tracking the relationship between text and animated elements easier from a development perspective, but prevented the text from being searchable by CMS search functions and hid the text from search engines like Google and Duck Duck Go. In V02 all of the text is included as searchable html.

While the scrolling presentation style does not have as much interactivity as some of the older content on the site, the approach is an effective way to tie text and visual information together in a way that allows each to reinforce the other. Giving the reader the ability to scrub back and forth through animated elements allows them to move through the material at their own pace. 

This style will not completely replace the more interactive type of material I’ve posted to SciencePrimer.com in the past, but the creation of this relatively easy to use template will allow me to experiment with more with of type of guided learning.