--- title: "Getting animations done right and with purpose" publication: "Frontend Focus" issue: 709 published_at: "2025-09-17" canonical_url: "https://frontendfoc.us/issues/709" --- Plus Safari 26 goes through the looking glass. | Together with [![Code Rabbit\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_1238,h_192/e_make_transparent/co_white,e_outline:37/fcshbu9d17nd8smej96j.png)](https://coderabbit.link/cooperpress) 🚀 **Frontend** Focus #​709 — September 17, 2025 | [Read on the web](https://frontendfoc.us/issues/709) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1758101976/cfjcdqmjupsyuw2rwe8i.png)](https://webkit.org/blog/17333/webkit-features-in-safari-26-0/) [WebKit Features in Safari 26.0](https://webkit.org/blog/17333/webkit-features-in-safari-26-0/) — With the release of macOS 26, iOS 26, et al. comes a major release of Safari. This is a bumper look at what’s new in the [now-available Safari 26](https://developer.apple.com/documentation/safari-release-notes/safari-26-release-notes). Features landing include anchor positioning, scroll-driven animations, the element (for embedding 3D models onto pages), the CSS `progress()` function, SVG icon support, and now "[every site can be a web app on iOS and iPadOS](https://webkit.org/blog/17333/webkit-features-in-safari-26-0/#every-site-can-be-a-web-app-on-ios-and-ipados)." WebKit [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/31d2318c.png)](https://coderabbit.link/cooperpress) [AI Code Reviews Meet CLI Coding Agents](https://coderabbit.link/cooperpress) — CodeRabbit CLI brings instant code reviews directly to your terminal, integrating with Claude Code, Cursor CLI, and other AI agents. While they generate code, CodeRabbit ensures it's production-ready - catching bugs, security issues, and hallucinations before they hit your codebase. CodeRabbit sponsor [What Can We Actually Do With `corner-shape`?](https://css-tricks.com/what-can-we-actually-do-with-corner-shape/) — It's currently [only supported in Chrome/Edge](https://caniuse.com/mdn-css_properties_corner-shape), but this property enables us to style corners, beyond what we can do with the existing `border-radius` property. Here’s a look at how, complete with several neat demos. “_So, corner-shape is actually a helluva lot of fun. It certainly has more uses than I expected_”. Daniel Schwarz ⚡️ IN BRIEF - 🧭 If you want to update to the recently released Safari 26 _without_ updating the entirety of macOS, [there is a way](https://bsky.app/profile/jensimmons.bsky.social/post/3lyxz5i26cs2i). - 🌐 Compatibility utility [Browserslist](https://browsersl.ist) now [supports Baseline](https://web.dev/blog/browserslist-supports-baseline?hl=en). - 📚 [This Is for Everyone](https://www.panmacmillan.com/authors/tim-berners-lee/this-is-for-everyone/9781035023677), is a new memoir (out last week) from World Wide Web inventor Sir Tim Berners-Lee. - 👾 One just for fun: [create your own Space Invader](https://muffinman.io/invaders/), complete with a little animation. For more, [here's how it came to be](https://muffinman.io/blog/invaders/). 📙 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1758113235/bdmfvohdb5v6zkzbtui9.jpg)](https://una.im/follow-the-anchor/) [Follow-the-Leader Pattern with CSS Anchor Positioning](https://una.im/follow-the-anchor/) — Una shares a couple of cool (Chromium only) demos for a CSS-based pattern which uses a ‘follower’ element that will dynamically update its anchor based on user input/state changes. A neat little demo of what’s possible with anchor positioning. Una Kravets [You Don't Need Animations](https://emilkowal.ski/ui/you-dont-need-animations) — A good primer on when (and when not) to add animations to your user interfaces, along with pointers on how to do so effectively and with purpose. Emil Kowalski [An Accessible Guide to WCAG 3.3.8: Authentication Without Frustration](https://auth0.com/blog/an-accessible-guide-to-wcag-3-3-8-authentication-without-frustration/) — Highlights how the act of logging in can often be tough for users with cognitive disabilities, and then looks at the guidance available to us. Ramona Schwering [Accelerate Your Path from Mid-Level to Senior Developer](https://frontendmasters.com/sale/?utm_source=classified&utm_medium=email&utm_campaign=frontendfocus) — Get access to over 250 frontend and fullstack engineering courses with Frontend Masters — [$100 off yearly membership](https://frontendmasters.com/sale/?utm_source=classified&utm_medium=email&utm_campaign=frontendfocus). Frontend Masters sponsor [Subgrid: How to Line Up Elements to Your Heart’s Content](https://webkit.org/blog/17339/subgrid-how-to-line-up-elements-to-your-hearts-content/) — Saron notes that although subgrid is not new, the recent State of CSS survey results revealed how it’s still confusing to people — as such this post shares a way to understand things by way of a component in need of a subgrid. Saron Yitbarek (WebKit) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1758103589/rkzn9xktxanu2nm2czs6.png)](https://frontendmasters.com/blog/replace-your-animated-gifs-with-svgs/) [Replace Your Animated GIFs with SVGs](https://frontendmasters.com/blog/replace-your-animated-gifs-with-svgs/) — Yes, there’s a few gotchas to keep in mind, but John shares the benefits of animated SVGs, including dramatically smaller file sizes, their infinite scalability, and some media query capabilities. John Rhea [Breakpoint Columns, Five Ways. Which Do You Like?](https://frontendmasters.com/blog/breakpoint-columns-five-ways-which-do-you-like/) — Chris looks at the handful of ways in which we can approach switching up how columns display depending on a breakpoint, such as via media queries, `if()` functions, etc. Chris Coyier [How Fast Do Websites Load From Google Search? Comparing Various Prefetching and On-Demand Load Methods](https://www.pawelpokrywka.com/p/google-prefetching-methods-performance-study) Paweł Pokrywka [Understanding Focus Indicators for Web Accessibility](https://www.a11y-collective.com/blog/focus-indicator/) A11Y Collective ['Screen Readers Do Not Need to Be Saved by AI'](https://www.craigabbott.co.uk/blog/screen-readers-do-not-need-saved-by-ai/) Craig Abbott 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/eueluqk5umgmp7vfkxjm.jpg)](https://github.com/LeaVerou/bluesky-likes) 🦋 [BlueSky Likes: Flexible Components for Displaying Bluesky Likes](https://github.com/LeaVerou/bluesky-likes) — [Live demo here](https://projects.verou.me/bluesky-likes/). Includes two custom element components: bluesky-likes and bluesky-likers. One displays the number of likes and the other displays a group of avatars of those who liked a post. _— P.S. You can [follow us here](https://bsky.app/profile/frontendfocus.bsky.social)_. Lea Verou [Ready to Increase Your Conversions? Get Started with Free Trials](https://go.clerk.com/1M7jY4o) — Free Trials are now available through Clerk Billing. Stop building trial logic, cancellation flows, and upgrade paths. Clerk sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1758026267/ru1rueegolnopeu6kvob.png)](https://www.volumecolor.io/) [Volume: A 3D OKLCH Color Palette Creator](https://www.volumecolor.io/) — As explained on the intro page, this tool, “_turns color selection from a flat swatch-hunt into a sculptural, 3D design journey_”. Includes a visual tour to help you get started. Interesting approach! Volume [Kirby 5.1.0 Released](https://github.com/getkirby/kirby/releases/tag/5.1.0) — The latest version of a popular PHP-based CMS. Adds new navigation options, support for nested dialogs, UI improvements, changes to language detection, and more. Kirby [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1758102857/bmzgvbkl0scqhexstazs.png)](https://brutalita.com/) [Brutalita Sans: An Experimental Font and Font Editor](https://brutalita.com/) — An interesting project that lets you download the original font, or you can edit _each individual character_ right on the page to create your own custom version of the same typeface. Javier Bórquez [React Bits: 100+ Creative, Animated React Components](https://www.reactbits.dev/) — If you want a bit of visual _pizzazz_ in your project, this is for you. [The components](https://reactbits.dev/text-animations/split-text) span from a variety of text effects to general animations, [a ‘chroma grid’](https://reactbits.dev/components/chroma-grid), bouncing cards, distortions, and more. [GitHub repo.](https://github.com/DavidHDev/react-bits) David Has [Tooooools: Free Minimalist and Lo-fi Effects for Image and Video Processing](https://www.tooooools.app/) — Upload an image and choose from 13 effects (dots, patterns, distort, dithering, bevel, etc.), each of which can be customized dynamically on the page. Export is in PNG format. Daniil Sukhovskoy [CrawlerCheck: Check if Google Bots and AI Crawlers Can Access Your Site](https://crawlercheck.com/) Attila Bögözi 📬 **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://bsky.app/profile/brandrick.bsky.social) & [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/709/*|UID|*?ipx=t)