Two new CSS functions, sibling-index() and sibling-count(), can simplify animated marquee code by replacing repetitive nth-child declarations and manual item-count custom properties. The post walks through refactoring a logo marquee component to use these functions, reducing verbosity while maintaining the same animation behavior. A caveat is noted: sibling-count() only works on child elements, so a parent-level track-width calculation still requires a manual --numItems variable until a hypothetical children-count() function arrives. The post also covers accessibility best practices using prefers-reduced-motion with an opt-in approach.
Table of contents
Sign up to receive a weekly recap from thoughtbotThe original codeReducing our code with functionsAn annoying caveatA quick word on motionIf you enjoyed this post, you might also like:Sort: