Make avatars scale smoothly during animations

src/room/InCallView.module.css

@@ -66,6 +66,12 @@ limitations under the License.
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  /* To make avatars scale smoothly with their tiles during animations, we
+  override the styles set on the element */
+  --avatarSize: calc(min(var(--tileWidth), var(--tileHeight)) / 2);
+  width: var(--avatarSize) !important;
+  height: var(--avatarSize) !important;
+  border-radius: 10000px !important;
 }
 
 @media (min-height: 300px) {

src/video-grid/NewVideoGrid.tsx

@@ -563,7 +563,7 @@ export const NewVideoGrid: FC<Props> = ({
       >
         {slots}
       </div>
-      {tileTransitions(({ shadow, ...style }, tile) =>
+      {tileTransitions(({ shadow, width, height, ...style }, tile) =>
         children({
           ...bindTile(tile.item.id),
           key: tile.item.id,
@@ -571,6 +571,8 @@ export const NewVideoGrid: FC<Props> = ({
             boxShadow: shadow.to(
               (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
             ),
+            "--tileWidth": width.to((w) => `${w}px`),
+            "--tileHeight": height.to((h) => `${h}px`),
             ...style,
           },
           width: tile.width,

src/video-grid/VideoTile.module.css

@@ -18,6 +18,8 @@ limitations under the License.
   position: absolute;
   top: 0;
   will-change: transform, width, height, opacity, box-shadow;
+  width: var(--tileWidth);
+  height: var(--tileHeight);
   border-radius: 20px;
   overflow: hidden;
   cursor: pointer;