Scrollytelling: Another AI Coding Experiment

Take a look at this, wouldja? (Be sure to scroll to the end, or it’s all for naught.)

I realize it doesn’t exactly look like rocket surgery, but that simple bit of web development represents about four hours of a skilled coder’s time…possibly upwards of $200 worth of time.

And I made all of that up. In reality, it took me about four hours of elapsed time (which included a break for lunch and time away to do some house cleaning), and ChatGPT about 2 minutes in total to generate a script to accomplish what I requested. And if you’re a freelance website designer or developer, this scenario could represent a dream come true or your worst nightmare, depending on your situation.

What follows is likely overly geekish for many of you, although I’ll try to stick to layman’s terms (and, tbh, layman’s terms is all I can muster for some of it because I’m not a coder). I hope you’ll come away with a better understanding of how AI models like ChatGPT can be useful in solving problems that might otherwise be out of reach for many of us. At the very least, maybe it will pull back the curtain a bit and remove some of the mystery behind a website-related technique that’s becoming more and more common.

Scrollytelling: Dumb Name, Smart Concept

Scrollytelling is a digital storytelling technique that combines long-form content with interactive multimedia elements, such as animations, videos, and images, that are triggered by scrolling. As users scroll down the page, the visual elements change or appear, enhancing the narrative and creating an immersive experience. This technique is often used in online articles, reports, and data visualizations to make content more engaging and memorable.

Source: Google’s Search Labs AI

In its simplest form (as demonstrated by the page I’ve ChatGPT and I have created, linked at the top of the page), it’s a story with components that are revealed as the reader scrolls through it. The technique has been around for years, but seems to be increasingly popular and shows up on major websites like the Wall Street Journal, the New York Times, and National Geographic. Oh, and possibly in a more sophisticated manner, the Fire Ant Gazette.

I’ve been intrigued by the concept for quite some time but I recognized that I did not have the technical skills to re-create it for my own use…nor did I have the patience or desire to acquire them…nor did I want it badly enough to pay someone else to do it for me. This is an oft-ignored hobby for me, as you well know.

But after having some success using ChatGPT to create an image slider that I could use on the blog, I decided to see if I could enlist its help with scrollytelling.

It’s all about the Prompt

Despite what you read in science fiction stories, AI chatbots like ChatGPT can’t [yet] read your mind, and the timeworn concept of GIGO (garbage in/garbage out) applies to interactions with them. In other words, clear and specific instructions are key to achieving whatever results you’re seeking from the bot. In this case, I started our conversation thusly:

I need some help/advice regarding the potential for a script for my blog. Are you familiar with a website script that initially displays an image that fills the viewport and as the visitor scrolls down, text appears at the bottom of the viewport, overlaying the image. As the text is scrolled upward and disappears, a new background image replaces the original image, and new text is scrolled into view.

And this was ChatGPT’s immediate response:

Yes, I’m familiar with that style of website interaction. What you’re describing is often referred to as “scrollytelling” — a combination of scrolling and storytelling — commonly used in news articles, interactive blogs, and product showcases.

It went on to elaborate on the concept, including the technologies used to create the effect (HTML, CSS, JavaScript). By the way, if you’re really desperate for reading material, perhaps as a cure for insomnia, you can read the entire conversation between ChatGPT and me on this subject.

I confess that I wasn’t even familiar with the term scrollytelling, but it was obvious that the bot recognized what I was after (and had the decency not to point out my ignorance). This conversation eventually became quite lengthy as ChatGPT would provide coding for a script that it thought met my requirements, but which either didn’t work or needed to be tweaked.

There was a point at which I became a bit frustrated because we weren’t making progress. We went back and forth at least eight times while attempting to get the behavior and the appearance of the script right. We were getting close, but I had almost decided to give it up and focus on more important things, like a nap, when I decided to try once more with a new prompt.

The new script works perfectly…but it’s not really capturing what I have in mind. My fault entirely for not being more clear with my vision. Let me try again.

I want the initial background image to be static and ONLY the associated descriptive text to scroll upward. Ideally, that text would appear in a “floating” box with a semi-opaque background. As the text box scrolls off the window, the next background image will appear and a new text box will begin to scroll upward. This behavior will repeat throughout the “story.”

This seemed to result in a light bulb going on over ChatGPT’s imaginary head, as it identified what I was seeking as a reveal on scroll interaction (yet another term I wasn’t familiar with). In my defense, I thought I had described this pretty well near the beginning of the project but whatever. The next iteration of the bot’s script met all the criteria I had in mind for it and I deemed it a success.

The collaboration is real, and it’s spectacular

Here’s the really impressive thing about ChatGPT, as far as I’m concerned. While I can give it very detailed and explicit instructions and it will do its best to fulfill them, it will also make suggestions that might enhance the usefulness of what I’m aiming for. Many times, it suggests ideas that would never have occurred to me.

For example, following one iteration early in the process, the bot gave me this response:

Also, while there were a number of false starts and failed attempts, each time I described what I was seeing in the test page, ChatGPT attempted to diagnose the cause and suggest a solution. This back-and-forth debugging process is in fact very human-like. I experienced it many times as a freelance designer/developer working with clients who weren’t always sure what they wanted, but they’d know it when they saw it.

Conclusion: There’s a hammer for that nail (even when you have no 2x4s)

[I really wanted to find something relevant that would allow me to use “you can’t spell ‘nail’ without ‘AI'” but I got nuthin’ (except apostrophes).]

As I implied at the beginning, I know (or assume) that many (or most) of you have little (or no) interest in or need for computer coding, and that’s fine. Admirable, even; you’ve obviously got your priorities straight.

But for us poor souls who somehow can’t escape that briar patch, assistance in the form of AI bots can be a powerful — if not always perfect — tool, and with a little practice, it can also be satisfying and even educational.

In the interest of full disclosure, now that I have the scrollytelling solution in hand, I have to admit that I don’t really have a problem to apply it to. In this case, it was the journey, not the destination, that was important. In other words, I climbed that molehill because it was there.