---
title: "UI animation whimsy with the Shared Element Transitions API"
publication: "Frontend Focus"
issue: 562
published_at: "2022-10-05"
canonical_url: "https://frontendfoc.us/issues/562"
---

Plus the State of CSS survey is back. |       

Together with [![Retool logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_250,h_80/e_make_transparent/co_white,e_outline:7/xujzqhybod6rrw1uttra.png)](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress)         

#​562 — October 5, 2022 | [Read on the web](https://frontendfoc.us/issues/562)       

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1664972849/sx6kisrbrqr0xyrv8rdg.jpg)](https://www.smashingmagazine.com/2022/10/ui-animations-shared-element-transitions-api-part1/)  

[Delightful UI Animations with the _Shared Element Transitions API_](https://www.smashingmagazine.com/2022/10/ui-animations-shared-element-transitions-api-part1/) — Adrian shares how the [Shared Element Transitions API](https://developer.chrome.com/blog/shared-element-transitions-for-spas/) is a “_game-changing feature that will enable us to create impressive and elaborate UI animations easily._” This post explores the potential by building real-life examples from scratch. 

Adrian Bece (Smashing Magazine)   

[Templating in HTML with `<template>`](https://kittygiraudel.com/2022/09/30/templating-in-html/) — A quick reminder about the `<template>` element and how it can come in handy, though folks on _Hacker News_ were [quick to pick up on its limitations.](https://news.ycombinator.com/item?id=33085976) 

Kitty Giraudel   [![\](https://copm.s3.amazonaws.com/75007ed6.png)](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) 

[Build Internal Tools 10x Faster with Retool](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) — Assemble your UI, connect data, and publish apps faster than building from scratch. Retool offers 100+ pre-built UI components and the ability to write code to customize how apps look and work. Schedule a 1:1 demo to learn more. 

Retool sponsor   

[The 'New Wave' of JavaScript Web Frameworks](https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/) — A few months ago he covered [the new wave of React state management](https://frontendmastery.com/posts/the-new-wave-of-react-state-management/) and now Rem is back trying to _“make sense of the proliferation of new JavaScript web frameworks.”_ As are we all. Vue, Svelte, Solid, Remix, Astro and Qwik all make an appearance here. 

Rem   

[More Details on the Transition to Manifest V3](https://developer.chrome.com/blog/more-mv2-transition/) — Outlines new details about the (arguably controversial) plan for Chrome to move extensions over to [Manifest V3](https://blog.chromium.org/2020/12/manifest-v3-now-available-on-m88-beta.html) (basically Chrome's new extension platform) including key dates in January and June 2023. 

David Li (Chrome Developers)   

[⤷ 'Chrome's Manifest v3 Push Signals Changing of the Guard'](https://www.buildingbrowserextensions.com/blog/chromes-manifest-v3-push-signals-changing-of-the-guard) — Claims this updated version is “_hostile to extension developers and users_”. We said it was controversial.. 
Matt Frisbie     

**⚡️ IN BRIEF**   

- **The _State of CSS_ survey is back for 2022** and is currently seeking responses —[you can fill it out here](https://stateofcss.com/en-us/).
- Chromium has shared [the intent to prototype _CSS Nesting_](https://groups.google.com/a/chromium.org/g/blink-dev/c/-GxQ0MIcons/m/dTi5stNrBAAJ), the ability to nest CSS style rules inside other style rules.
- Philip Jägenstedt shares a quick update/summary of the [Interop 2022](https://wpt.fyi/interop-2022) effort [in this video](https://www.youtube.com/watch?v=1mD2gxv8I7s).
- Research from Akamai suggests some [13 million domains registered each month are malicious](https://www.theregister.com/2022/09/28/akamai_malicious_domains/).
- Elliot Jay Stocks site is now using a variable font - he outlines [how it was implemented and some things you may want to think about](https://elliotjaystocks.com/blog/this-sites-type-is-now-variable).
- One for all font fans: Braun has switched from using Neue Helvetica to a new ['Braun Linear' typeface](https://www.iconwerk.com/braun-font.html).    

📙 **Tutorials, Articles & Opinion**  

[Element Timing: One True Metric to Rule Them All?](https://www.speedcurve.com/blog/element-timing-one-true-metric/) — _Largest Contentful Paint_ (aka LCP) is a Core Web Vital that’s gotten a lot of attention in recent years, but it’s not without its pitfalls. The author shares how _Element Timing_ can be a better way to track the performance of the page elements that matter most to site owners and visitors, especially on SPAs. 

Andy Davies (Speedcurve)   

[Meta on Launching a New Chromium-Based WebView for Android](https://engineering.fb.com/2022/09/30/android/launching-a-new-chromium-based-webview-for-android/) — Facebook’s in-app browser on Android devices is being updated in an effort to improve security, performance, and the overall user experience. 

Nate Schloss (Meta)   

[Free Webinar! Sprinkle the Clean Code Magic in Your JavaScript Projects](https://sonarsource.zoom.us/webinar/register/2216644710652/WN_FzOicUhiSWGUO9MS6SsVkA) 

Sonar sponsor   

[When Going Somewhere Does a Thing: On Links and Buttons](https://kilianvalkhof.com/2022/css-html/when-going-somewhere-does-a-thing-on-links-and-buttons/) — If it goes somewhere, it’s a link. If it does something, it’s a button. Are those two things always mutually exclusive? 

Kilian Valkhof   

[Will Serving 'Real' HTML Content Make a Site Faster?](https://blog.webpagetest.org/posts/will-html-content-make-site-faster/) — A good comparison of SSR performance on most of the top full stack JavaScript frameworks. Astro and Sveltekit, two of the newer generation of frameworks, come out on top in many of their measurements. 

Scott Jehl   

['I Am Not That Excited About New CSS Features'](https://www.silvestar.codes/articles/i-am-not-that-excited-about-new-css-features/) — Some quick thoughts on the flurry of new CSS features we have seen of late and whether adoption of these additional riches may be slow. 

Silvestar Bistrović   

▶[A Love Letter to DOMPoint and DOMMatrix](https://youtu.be/VdNzD4lhidw) — A quick look at two JavaScript APIs useful for visual effects. 

Google Chrome Developers   

['Where Web Components Went Wrong (And How We Can Turn It Around)'](https://space.matthewphillips.info/posts/where-web-components-went-wrong/) 
Matthew Phillips   

[The Battle for the Soul of the Web](https://www.theatlantic.com/technology/archive/2022/10/internet-archive-decentralized-web-web3-brewster-kahle/671647/) 
Kaitlyn Tiffany  

🔧 **Code, Tools & Resources**  

[50+ Shapes: Copy the CSS for Just About Any Shape](https://getcssscan.com/css-shapes) — Not just run-of-the-mill stuff (triangle, oval, diamond, etc.) but also unique shapes like a checkmark, yin/yang symbol, octagon, cylinder, and lots more. 

CSS Scan   

[Tailwind CSS Variant Generator](https://charliejoseph.com/tools/tailwind-css-variant-generator) — Automatically sort Tailwind CSS classes into shared and unique attributes with this browser-based tool. [Here’s a video showing how you may approach using it](https://www.youtube.com/watch?v=reD1Zse7uZE). 

Charlie Joseph   

[Simplify Front-End Performance Monitoring by Analyzing UX Data](https://www.datadoghq.com/dg/real-user-monitoring/ux-monitoring/?utm_source=advertisement&utm_medium=newsletter&utm_campaign=dg-cooperpress-applications-ww-frontend-s-uxmonitoring) — Analyze user errors in real-time and resolve frontend issues fast. Start monitoring your frontend data in minutes with a Datadog free trial. 

Datadog sponsor   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1664975745/sew30d6r72trdokdd2to.png)](https://icons.download/)  

[icons.download: A Free Set of Open-Source SVG Icons in 16 Styles](https://icons.download/) — A nice set of icons with strokes in 4 different thicknesses along with options for outline and solid styles, and round vs. sharp corners. 

Design Resource   

[Illustration Link: 80+ Links Where You Can Find Free Illustrations for Your Project](https://www.illustrationlink.com/) — A searchable directory that includes stuff we’ve linked to before (and more) but compiled into a single resource. 

Illustration Link   

[dark-mode-toggle: A Dark Mode Toggle Component for React](https://github.com/anatoliygatt/dark-mode-toggle) — Not to be confused with the Google Chrome team’s [component of the same name](https://github.com/GoogleChromeLabs/dark-mode-toggle), this one is specifically for use in React. 

Anatoliy Gatt   

- Developer browser Polypane [just hit version 11](https://polypane.app/blog/polypane-11-json-viewer-new-accessibility-tools-chromium-106-i-phone-14-devices-and-screenshot-updates/), adding new accessibility tools, an updated rendering engine, and a new JSON viewer.
- [Bootstrap version 5.2.2 is out now](https://blog.getbootstrap.com/2022/10/03/bootstrap-5-2-2/), with various bug fixes and changes to button hover styles.
- Stark has [a new macOS version](https://twitter.com/getstarkco/status/1574779770256113666) of their accessibility design tool.
- [Leafjs](https://leafjs.samzhangjy.com/) is another entrant to the world of Web Component-based frameworks for building modern webapps.     

🧑‍💻 JOBS  

[Full-Stack Engineer (NYC / Remote)](https://apply.workable.com/j/E0E1B15339) — 100M+ devices, 100B+ API calls. Radar is looking for Product Engineers to build geospatial dev tools. 
Radar   

[Software Engineer](https://www.stickermule.com/career/6de4ccd8-7e58-4b65-9a25-62354972bdbd) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers. 
Stickermule   

[Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. 
Hired    

🚗 **.. And Finally** 

![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1664968098/jabtpetk9mrrtszzbngc.png)  

[Nightdrive](https://incoherency.co.uk/blog/stories/nightdrive.html) — An expalanation of a JavaScript demo/simulation of driving at night time on the freeway/motorway — created reasonbly simply by drawing circles on a HTML canvas. There's [a full screen version, with music, here](https://incoherency.co.uk/nightdrive/). 

James Stanley    

📬 

**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://twitter.com/chrisbrandrick) & [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/562/*|UID|*?ipx=t)