--- title: "Getting to grips with scroll-driven animation" publication: "Frontend Focus" issue: 642 published_at: "2024-05-08" canonical_url: "https://frontendfoc.us/issues/642" --- Plus when did you last minify? | Together with [![Userfront\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_471,h_107/e_make_transparent/co_white,e_outline:12/pckilgymweyjt5zipj6x.png)](https://userfront.com/?&utm_source=frontendfoc-us&utm_medium=newsletter_sponsored_link&utm_campaign=magnitude&utm_content=transformational) 🚀 **Frontend** Focus #​642 — May 8, 2024 | [Read on the web](https://frontendfoc.us/issues/642) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1715164167/disyysfszhid3wwjdakj.png)](https://developer.chrome.com/blog/scroll-driven-animations-video-course) ▶[Unleash the Power of Scroll-Driven Animations](https://developer.chrome.com/blog/scroll-driven-animations-video-course?hl=en) — This new 10-part video series should equip you with what you need to know about [scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) using CSS or JavaScript. The course covers the core concepts (such as `scroll()`, `view()`, etc), and shares several practical examples. All of the episodes are [available to watch now](https://goo.gle/sda). Bramus Van Damme [![\](https://copm.s3.amazonaws.com/dfc867a0.png)](https://userfront.com/?&utm_source=frontendfoc-us&utm_medium=newsletter_sponsored_link&utm_campaign=magnitude&utm_content=transformational) [Transformational Auth & Identity | Userfront](https://userfront.com/?&utm_source=frontendfoc-us&utm_medium=newsletter_sponsored_link&utm_campaign=magnitude&utm_content=transformational) — "Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use." Userfront sponsor [Why Don’t We Talk About Minifying CSS Anymore?](https://blog.sentry.io/why-dont-we-talk-about-minifying-css/) — Salma notes that minification of CSS is now generally something that modern frontend tooling takes care of for us, so it’s not really a practice that’s front of mind anymore — however, it’s still important for us to understand how our stylesheets are being delivered to the browser and what impact they are having on performance. Salma Alam-Naylor ▶[23 CSS Features You Should Know (And Be Using) by Now](https://www.youtube.com/watch?v=opHu7HvFM60) — Adam Argyle joins Kevin to discuss some ‘under the radar’ CSS features in a rapid fire format. Includes things like `:focus-visible`, `object-fit`, `overscroll-behavior`, and more. A good refresher. Kevin Powell ⚡️ Quick Links - 🏎️ Curious if your web host / platform is fast? [Here's some real-world data on server response latencies](https://ismyhostfastyet.com) (_time to first byte_). - 🗺️ [This network visualization of the web](https://graph.henryn.ca/) is interesting to fly around and see how things are mapped out and linked. (Yes, Frontend Focus is there...) - 👁️ Global Accessibility Awareness Day is coming up on May 16th. [This post shares some ideas](https://sconner.net/blog/ideas-for-gaad/) on how to engage. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1715163560/nh0jljku8r4mm9rhykd2.png)](https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/) [Using the Popover API for HTML Tooltips](https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/) — Chris continues his exploration of the Popover API, this time exploring a nice tooltip use-case. Chris Coyier [Misconceptions About CSS Specificity](https://www.bram.us/2024/05/05/misconceptions-about-css-specificity/) — Clarification on how CSS specificity is calculated and what does and doesn’t affect the specificity of a selector in CSS. Bramus Van Damme [Should We Rely on Browser Detection?](https://nielsleenheer.com/articles/2024/should-we-rely-on-browser-detection/) — The User-Agent string is something that web developers should really handle with care, as browser detection is often guesswork — but if you’re building for the web platform (and not a single browser) this won’t be much of an issue. Niels Leenheer [Handling Images & Videos in Angular? This Practical Guide Is for You](https://imagekit.io/blog/angular-image-video-upload/?utm_source=Cooperpress&utm_medium=email&utm_campaign=Mediapromotion_Q124&utm_term=FrontEndFocus&utm_content=Sponsored_listing) — Implement drag-and-drop uploads, progress bar, image previews & server-side file validations. Read on to learn more. ImageKit sponsor [Faster Websites with the Picture Element](https://frankstall.one/blog/faster-websites-with-the-picture-element/) — An overview of the various wins to be had from using the `` element. Frank Stallone [Combining CSS`:has()`and HTML <`select`> For Greater Conditional Styling](https://www.smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/) — An interesting technique here for what Amit calls the “_great conditional operator_”. Amit Sheen [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1715169479/knhz8knaoybo4zzjz4ip.png)](https://noahliebman.net/2024/03/making-room-for-long-list-markers-with-subgrid/) [Making Room for Long List Markers with `subgrid`](https://noahliebman.net/2024/03/making-room-for-long-list-markers-with-subgrid/) — By default lists (`ul` and `ol`) give a fixed 40px of padding. This is fine for most use cases, but when lists get long an issue arises. Noah shares a solution. Noah Liebman [A Brief Note on Highlighted Text](https://adrianroselli.com/2024/05/a-brief-note-on-highlighted-text.html) — Specifically on how to give any styled highlighted text sufficient contrast. Adrian Roselli [How to Monitor Third-Party Resources that Impact UX with Playwright](https://www.checklyhq.com/blog/how-playwright-can-monitor-third-party-resources/) Stefan Judis ▶[Cookie Permissions: Six Design Guidelines](https://www.youtube.com/watch?v=yHOEp539ETk) Samhita Tankala [What is Vite (and Why is it So Popular)?](https://blog.stackblitz.com/posts/what-is-vite-introduction/) Eric Simons 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1715161272/wm52ragopqqwzrxhj0be.png)](https://github.com/missive/emoji-mart) [Emoji Mart 5.6: A Customizable Emoji Picker for the Web](https://github.com/missive/emoji-mart) — This is a popular and recently updated HTML component, complete with a solid search function and lots of options for further customization. You can [test it out here](https://missiveapp.com/open/emoji-mart). 💌🚀🧡 Missive [Icônes: An Icon Explorer with Instant Search for 100+ Icon Sets](https://icones.js.org/) — The app is powered by Iconify and built in Vue. You can select any icon set, then search by keyword within the chosen set. Anthony Fu [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1715161037/yexd48bp5cno7aekugqz.png)](https://github.com/tinyworldmap/tiny-world-map) [tinyworldmap: A World Map Solution for Offline-First & Low-Bandwidth Web Apps](https://github.com/tinyworldmap/tiny-world-map) — Designed to be used with Leaflet and, as implied, [the demo works smoothly](https://tinyworldmap.com/), having been thoroughly tested on low-end, decade-old phones, with no discernible lag. tinyworldmap [Can I Email..? Support Tables for HTML and CSS in Emails](https://www.caniemail.com/) — It’s like [Can I Use](https://caniuse.com/) but for email clients and their varying levels of HTML and CSS support. HTeuMeuLeu [Palette Generator: An Online Tool to Create Color Palettes using OKLCH](https://colors-gen.vercel.app/?FO78141000) Fran Perez [Saas-Boilerplate: A Fullstack Starter for Building Projects with Next.js, Tailwind, TypeScript, and More](https://github.com/ixartz/SaaS-Boilerplate) Remi Wg 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/642/*|UID|*?ipx=t)