New Tool Alert! ScrollyVideo.js Is A Wild Ride Through the World of Responsive Scrollable Videos

New Tool Alert! ScrollyVideo.js Is A Wild Ride Through the World of Responsive Scrollable Videos

You've seen things like this before on the giant publications. Text appears in coordination with video content, and it matches the imagery as it flies across your screen. It might now be time to leave your jealousy at the door because ScrollyVideo.js has arrived and it's looking to shake up how we display content for web users. This innovative new library provides a way to create responsive scrollable videos without obscure video encoding requirements. Compatible with React, Svelte, Vue, and plain HTML, this tool should be perfect for visual journalism, marketing materials, or other scrollytelling applications, but its implementation has been met with mixed reviews.

Brief testing from our side showed a viable product from which to work, though it isn't necessarily somethign that you can easily figure out as a novice.

The individual responsible for this product is Daniel Kao. Kao is a veteran data and news story visualization expert. With a degree in Cartography and Geographic Information Systems from the University of Wisconsin and experience as a senior graphics engineer for Commonwealth Magazine and frontend engineer for the New York Times, Kao is well-versed in the art of storytelling and crafting compelling visuals. He is passionate about using digital mediums to help readers understand complex challenges facing societies today and envisions newsrooms as the perfect environment for experimentation, development, and creativity. When Kao isn't working, he loves eating noodles, surfing, reading, and traveling.

Keeping in mind that our friends on Reddit tend to criticize just about everything that appears on the "Front Page of the Internet," not everyone is a fan of the new library. Reddit user @Billybobjobo pointed out some QA feedback: "Demo page is glitchy experience on iOS iPhone 12 Pro. Video doesn’t always progress with scroll—sometimes seems frozen—occasionally glitches back and forth between video frames at rest." He also noted that compressed videos tend to look bad when paused, which is a valid concern.

Another Reddit user, @Guitarromantic had this to say: "FYI, uBlock origin removes all the videos (it thinks they're ads?) which made for a confusing experience when I loaded the page." And @Escapefromelba noted, "Crashed my mobile browser. Android system UI super laggy until I closed the window. New Pixel 6a too. Congrats?!"

Despite the criticisms, there are still those who recognize the potential of ScrollyVideo.js. @Robsstuff praised the code, saying, "Really cool, checked out the code on GitHub too and it’s so nicely written and readable."

It's clear that while ScrollyVideo.js isn't perfect yet, it's a step in the right direction; allowing content creators to do more with less. Daniel Kao has created a tool that could revolutionize the way we create content, whether it be visual journalism, marketing materials, or other scrollytelling applications, and it's only a matter of time before it gets cleaned up a bit more, and we start seeing it on blogs all over the place! Who knows, we might even find a use for it here on 10 Best Design!

Design Tools JS