What We Learned: Pure CSS Nav Thumb Flip on Scroll Failures

What We Learned: Pure CSS Nav Thumb Flip on Scroll Failures

February 26, 2026February 26, 2026

1 Min Read

A recent CodePen Spark led me to this interesting demo. It has a cool effect, but I thought it used too much JavaScript, so I decided on a CSS version. Plus, I thought it would look better if the flip effect was “hinged” on the top/bottom edge, depending on the direction.

After about half an hour, I created this:

Animated GIF showing the final result, with each nav item getting selected at a corresponding scroll progression. Once selected, its text gets darker and moves slightly to the right, while its image flips into view rotating around the top edge. Once an item is deselected, its text fades and moves back to the left, and its image flips out of view rotating around the bottom edge. — recording of my result

Let’s explore how I did it… and what went wrong.

The Layout Basics

We have a

element with n children. We’ll pass this number n to the CSS as a custom property. The same goes for the index i of each nav item. Using Pug, I generated HTML from a data object. The HTML looks like this:

<nav style="--n: 7">

<a href="#" style="--i: 0">

tiger

<<span class="hljs

`You might also like`


Uncategorized

`Millions of Passwords and Social Security Numbers Exposed Due to Continuing Threats from Past Cybersecurity Incidents`



 Richard



February 19, 2026February 19, 2026


Uncategorized

`Steps to Prevent Your Smartphone from Tracking Your Activities`



 Richard



February 21, 2026February 21, 2026