Maybe you missed it. Maybe you didn’t. But The Odyssey Was for Sailors, is the most ambitious piece of visual storytelling I’ve ever done. It brings together five to six years of Data Journalism, one to two years of learning D3, and two narrative non-fiction writing classes I’ve done.
But with great ambition…comes great bugs.
Specifically, scrolling on mobile (hence the “Best Viewed on the Web” subtitle).
But with a bit of TLC, and diving way way way too deep into mobile full screen and scrollytelling fixes, we’ve got a fix. Huzzah!
It’s fixed now. If you tried to view this on your magic piece of glass in your pocket, and it was too broken to work, give it a try now.
Hey, but what was broken?
Look. I’m not a JavaScript expert. The scrollytelling magic you see is all courtesy of an amazing library called Scrollama, built by Russel Samora who created it to create really cool scrollytelling stories on The Pudding, and elsewhere.
I hacked it together to work with Flourish and my WordPress website on some of my previous stories (A Data History of UK Interest Rates, How I Used a Market Basket Analysis to Get a Job Offer). I also prototyped it work with some D3 charts on an unpublished story (maybe one day I’ll release it. But my gut keeps saying don’t. It’s related to this.)
But, this story was the first time I went a bit hard with SVGs and using CSS and D3 to animate it. I also wanted to create the intro splash page, which sets the scene and tone of the story. Giving the reader a chance to slow down and decide if they want the full adventure or the streamlined one.
But that splash page? And the interactive email subscription call-to-action? Yeaaaah – that introduced all sort of full-screen vertical height bugs and clashes.
Basically – the issue is when you scroll up. My use of scrollama calculates the screen height of the window, in order to execute subsequent logic for the scrolling experience. Y’know. Fade out the paragraph when it’s at 75% of the screen height. Move to the next background image at 90% etc.
But when you scroll up on mobile, the browser bar decides to enter the chat, and just go all Leeroy Jenkins on messing up all the delicate calculations that have been done in the background.
The fix, was deceptively simple – cache the window height of the browser window, and only execute the logic to recalculate things if the window size changes compared to the browser window.
And y’know the funny thing? All my use of AI tools didn’t get me there. Just plain old trial and error (with the tools), and actually slowing down and using the grey matter in between my ears.
A reminder – doing the hard work with your brain, and the easy work with these tools is the way. The other way around is just pain.
Give The Odyssey Was For Sailors a Try if You Haven’t Already
I’m just gonna plug the story one more time. It’s the best work I’ve done yet, not just technically, but with the whole words thing. Give it a read if you haven’t already.
Ciao