06/06/24

Rethinking HTML as a Kinetic Medium

User-generated Motion Propels Engagement

Every day, users scroll through skyscrapers worth of content on platforms like Instagram, with little happening beyond the vertical movement of text and images. By harnessing the simple up-and-down finger motion, web designers can introduce scroll-triggered animations, enhancing user engagement. This approach transforms passive scrolling into an interactive experience, adding dynamism and immersiveness to an otherwise mundane scrolling action. As user-generated content continues to dominate the media, these enhancements promise to make browsing much more captivating.

When the great engineering minds of the day agreed on the Hypertext Markup Language to be the standard of the Internet, it was made a) extremely simple and b) human-readable. By nature, HTML was meant to be a static medium, with its main elements being text, images, and mathematically described containers for text and images, much like a printed book. Many elements still bear names resembling typographic terms (e.g., margin and padding), with its main feature being a rigid grid, very much like back in the day when typography workers would put lead type in boxes to typeset a page. Nothing should really move unless you touch a scrollbar, which was also invented by engineers to be able to navigate a page larger than the window that it’s in. Digital video was not even invented yet, so when you strip away all add-ons and JavaScript controls, HTML’s bare bones are images and text advanced by scrolling.

Scrolling got its second life with the advent of handheld touch devices, as all social media companies have adopted the scroll feed as the main feature, which proved to be very popular on mobile where you can advance the feed with just one hand while holding the device. To make it more addictive and to push more content into your eyeballs, most apps play videos before you even tap on them. Some allow horizontal carousel, but the age of interface experimentation is seemingly over. If the engineers had their way, the world would turn into one giant scroll.

As designers, we are trying to challenge the paradigm and, while mindful of the universal usefulness of vertical scrolling, can propose a few ideas on how to improve the experience. In the motion demos that you see on this page, I was trying to explore a few tricks like dynamic masking, variable object speeds, and vertical and horizontal parallax.

In my next posts, I will be investigating stop motion (a term that usually describes incremental animation technique but in this case, I mean user-controlled motion) and horizontal motion on vertical scroll. The good old trusty trio of HTML, CSS, and JS still has a lot of untapped (no pun intended) potential.