Post

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @​keyframes bright { 50% { opacity: 1; }} line-height units are a gift 🎁

26 reposts330 likes

Uzo Okafor
@uzoway.bsky.social

It's crazy how I had to use GSAP to achieve this and you did it with just these few lines of CSS. You're the GOAT Jhey🫡. Thanks for always putting these demos together. Super helpful and insightful.

Moustik
@moustik.bsky.social

1lh, c'est comme si je disais var(--h2-font-size) :root{--h2-font-size: 1.5rem} ? C'est vraiment une question hein. Parce que je ne suis pas sûr de savoir quand utiliser lh ou rlh.

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

yeah - that will give you the height of relative lines real handy when you need to know the height of a line that could be tricky because you are using responsive fonts or even where the height of text doesn't directly match the defined font-size 🤙 developer.mozilla.org/en-US/docs/L...

developer.mozilla.orgCSS values and units - Learn web development | MDNThis has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page — you w...