Dealing with Jank

Alex Fox claims “smooth and beautiful animations when you scroll” and he’s right. Thanks to his library, lax.js, the janky CSS animation on the home page is now silky smooth!

What is Jank?

“Jank” is an industry term that’s been around for quite a while. I’m not entirely sure of the exact origin, but Googler Paul Lewis describes it as

Jank is any stuttering, juddering or just plain halting that users see when a site or app isn’t keeping up with the refresh rate. Jank is the result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app.

A Jank-free Journey

In my experience, the simpler solution, the better. One of my core beliefs is HTML before CSS and CSS before JavaScript. From the early days of my professional career, progressive enhancement was engraved in my brain. As a result, it was only natural for my first iteration to leverage CSS animations.

Unfortunately, I later spotted some janky scroll behavior, laggy animations, and other inconsistencies on some different devices. To combat this, I turned to lax.js.

The simplest implementation is to slap a class and data attribute on the dom elements being animated and let lax do its thing. This worked, but I opted to add the data-attributes via JavaScript after initial page load to keep the HTML a little more readable.

Conclusion

I hope that someday, CSS animations become more powerful. But for now, I am very pleased with how it turned out and will definitely keep lax.js in the toolbox for the future. Kudos to Alex for his hard work.